Imagesnt不工作與無限Ajax滾動和砌體

我有一個網站使用bootstrap和我已經創建的石工，我用無限Ajax滾動，在另一個div調用其他新聞，而不是預先默認的消息。然而，很多時候，如果快速滾動頁面，或者如果連接速度較慢，則元素會重疊並且不會返回到原來的位置，我認爲這是由於無法加載圖像。我試圖整合Imagesloaded但似乎無法正常工作......我不知道該怎麼辦...... 這裏是因爲我已經進行， HTML源：Imagesnt不工作與無限Ajax滾動和砌體

<div class="row masonry_base altre"> 
    {$news} 
</div> 

<div class="row masonry altre"> 
    <div class="col-lg-4 col-md-6 col-xs-12 post-grid"> 
    {$news_scroll} 
    </div> 
</div>

JS：

<script> 
(function($) { 
"use strict"; 

    var $container = $('.masonry_base'); 
    $($container).imagesLoaded(function(){ 
    $($container).masonry({ 
     itemSelector: '.post-grid', 
     columnWidth: '.post-grid' 
    }); 
    }); 
})(jQuery); 
</script> 

<script type="text/javascript"> 
    var container = document.querySelector('.masonry'); 
    var msnry = new Masonry(container, { 
    itemSelector: '.post-grid', 
     gutterWidth: 20 
    }); 
msnry.reloadItems() 
    var $container = $('.masonry'); 
    $($container).imagesLoaded(function(){ 
     $($container).masonry({ 
      itemSelector: '.post-grid', 
      columnWidth: '.grid', 
      gutterWidth: 20 
     }); 
    }); 


    var ias = $.ias({ 
    container: ".masonry", 
    item: ".post-grid", 
    pagination: "#pagination", 
    next: ".next a", 
    delay: 1200 
    }); 

    ias.on('render', function(items) { 
    $(items).css({ opacity: 0 }); 
    }); 

    ias.on('rendered', function(items) { 
    msnry.appended(items); 
    }); 

    ias.extension(new IASSpinnerExtension()); 
    ias.extension(new IASNoneLeftExtension({ 
     html: '<div class="btn btn-info btn-block btn-icon-left ias-noneleft" style="text-align:center"><p><em>No news</em></p></div>' 
    })); 
</script>

來源

2016-05-15 Xanger

此代碼：

$($container).imagesLoaded(function(){ 
    $($container).masonry({ 
     itemSelector: '.post-grid', 
     columnWidth: '.grid', 
     gutterWidth: 20 
    }); 
});

僅適用imagesLoaded到任何$container恰好是在其高管ution。它不適用於動態添加的內容。你應該再次調用這個函數來添加動態內容。也許在你的rendered回調。

此外，你應該只調用msnry.layout()調整內容已加載圖像後（這是沒有必要再打電話$.masonry）

希望它可以幫助

來源

2016-05-15 23:50:47

我已經修改了JS以這種方式，是正確的？ '

相關問題

Imagesnt不工作與無限Ajax滾動和砌體

回答

相關問題