masonryの新しい要素が表示されたとき、無限のスクロールにjQueryまたはJavaScriptの効果がありません

Question

この要素は、この要素の視差を石積みにします。

ページに無限スクロールJSを追加しましたが、新しい要素が表示されても元の要素には移行しません。私はそれがクリックで文書準備機能と関係していると思うが、私はそれを実装する方法を知らない。

$.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> 

はまた、新しいコンテンツのロードは、彼らが彼らの石工効果を持っていない：ここではこれはパララックス <div>要素のあるコード

です。

Answer 1

あなたはこのCdepenを参照することができます - これは役立つだろうGoogle検索

希望に発見。

HTML：

<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> 

CSS：

@import bourbon 

body 
    font-family: arial, sans-serif 

.content 
    height: 5000px 

.wrapper 
    +display(flex) 
    +justify-content(center) 
    +align-items(center) 
    +size(100% 100vh) 
    +position(fixed, 0px null null 0px) 

.box 
    +flex(none) 
    +size(100px) 
    line-height: 100px 
    text-align: center 
    font-size: 25px 
    color: #fff 
    background: #ff8330 

    &:nth-of-type(2) 
    background: #E01B5D 
    &:nth-of-type(3) 
    background: #30FFFF 
    &:nth-of-type(4) 
    background: #B3FF30 
    &:nth-of-type(5) 
    background: #308AFF 
    &:nth-of-type(6) 
    background: #1BE059 

はJQuery：

$.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(); 
});