Question

我有这个代码，通过砌体对我的元素产生视差效果。

我已将无限滚动JS添加到我的页面，但是当新元素出现时，它们不会转换为原始元素。我认为这与点击文档就绪功能有关，但我不知道如何实现它。这是代码

这适用于视差<div>元素：

 $.fn.moveIt = function(){
  var $window = $(window);
  var instances = [];

  $(this).each(function(){
    instances.push(new moveItItem($(this)));
  });

  window.onscroll = function(){
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst){
      inst.update(scrollTop);
    });
  }
}
var moveItItem = function(el){
  this.el = $(el);
  this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop){
  this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};

// Initialization
$(function(){
  $('[data-scroll-speed]').moveIt();
  });
</script>

<script type="text/javascript">
  $(".card").css({ translate: [60,30] }); 






and this is for the infinite scroll 

<script type="text/javascript">
$('.grid').infiniteScroll({
  // options
  path: '.next',
  append: '.grid-item',
  history: false,
});
</script>

此外，当新内容加载时，它们不会对它们产生砌体效果。

Answer 1

您可以参考此Cdepen - 在Google搜索上找到

希望这会有所帮助。

HTML：

static let collapsedHeigth: CGFloat = 80
static let expandedHeigth: CGFloat = 210

CSS：

let someDictionary = [ "Hello": 4, "Bye": 42 ]

JQuery的：

<div class="content">
  <div class="wrapper">
    <div class="box" data-scroll-speed="2">S</div>
    <div class="box" data-scroll-speed="3">C</div>
    <div class="box" data-scroll-speed="6">R</div>
    <div class="box" data-scroll-speed="5">O</div>
    <div class="box" data-scroll-speed="9">L</div>
    <div class="box" data-scroll-speed="4">L</div>
  </div>
</div>

当砌体新元素出现时，无限滚动dosn不具有jQuery或JavaScript效果

1 个答案: