jQuery Masonry無限的滾動和圖片重疊問題，我的tumblr主題

Question

我是編程新手（javascript），但爲了讓我的tumblr主題正常工作，我在過去幾天做了相當多的研究。我知道我的問題很常見，但因爲我似乎沒有足夠的知識來正確整合許多類似示例中給出的代碼部分。

My theme應該重寫tumblr的「每頁15個帖子」限制和「無限滾動」選項，它應該將我所有的帖子（所有圖片）放在一個無盡的頁面中。那麼，它不會。從here的一點點幫助，我設法包裹我的{塊：帖子}與隨着石工（）調用隨機變化幾個我結束了this

正如你可以看到我的照片不重疊（最後！），但在15個第一篇文章後，它看起來像一個新的頁面被創建，最後的圖片沒有正確對齊。

我的jQuery砌體的代碼是這樣的：

<script type="text/javascript"> 

$(window).load(function() { 
$('.autopagerize_page_element').masonry(), 
$('.autopagerize_page_element').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 : ".autopagerize_page_element", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
); 
}); 
</script> 

我知道，它的一塌糊塗...... 會很感激一些幫助。

Answer 1

我不習慣與tumblr工作，但我發生了什麼：

Line 110:

此腳本創建因爲周圍的條目每次通話時間以磚混包裝DIV，腳本，每個負載看起來像一個新的頁面，我認爲你可以簡單地刪除它。

一些提示： 你不必等待$（窗口）.load執行砌築，由$改變它（函數（）

爲了避免圖像重疊使用appened砌築方法和imagesLoad：Refer this

我看你用磚石1.0.1，請確保您正在使用磚石最後一個版本（2.1.06）

示例代碼：

$(function() { 
    //$('.autopagerize_page_element').masonry(); 
    var $container = $('.autopagerize_page_element'); 
    //wait until images are loaded 
    $container.imagesLoaded(function(){ 
     $container.masonry({itemSelector: '.entry'}); 
    }); 
$('.autopagerize_page_element').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: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
    } 
); 
}); 

，並一定要刪除最後一個腳本在這頭塊：

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

希望它可以幫助