砌體圖像重疊

所以我現在正在處理我的Tumblr主題。我正在使用Masonry將我所有的帖子放在一個5列的網格中，當我向下滾動時，使用無限滾動腳本將新圖像加載到網格中。不幸的是，當我向下滾動圖像時，大部分時間都是重疊的。我發現問題可能是在加載圖像之前觸發的Masonry，但現在我不知道如何解決這個問題。我已經在使用（window）.load而不是（document）.ready，但圖片保持重疊。以下是完整的代碼片段：砌體圖像重疊

<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> 
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js"> 
</script> 
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script> 
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script> 
<script type="text/javascript"> 


$(window).load(function() { 
$('.posts').masonry(), 
$('.masonryWrap').infinitescroll({ 
navSelector : "div#navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : "div#navigation a#nextPage", 
// selector for the NEXT link (to page 2) 
itemSelector : ".entry", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 11000, 
loadingImg : "", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
function() { $('.posts').masonry({ appendedContent: $(this) }); } 
); 
}); 
</script> 
<script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script>

有沒有人有關於如何讓它工作的想法？任何幫助，將不勝感激！

來源

2013-05-04 user2350274

砌體在您的圖像加載之前將項目絕對放置並佔用更多空間。利用Jquery的圖像加載來克服這一點。您可能希望最初隱藏您的元素，然後在完成加載後顯示它們。試試這樣的：

//Wire masonry onto the photolist with whatever defaults you need 
$photolist.imagesLoaded(function() { 
    $photolist.masonry({ 
     // options 
     itemSelector: '.photo', 
     columnWidth: 226, 
     isFitWidth: true, 
     gutterWidth: 12 
    }); 
});

來源

2013-05-04 17:06:38 Matt

砌體圖像重疊

回答

相關問題