jQuery Masonry vô hạn cuộn và hình ảnh chồng chéo vấn đề với chủ đề tumblr của tôi

Question

Tôi mới trong lập trình (javascript) nhưng tôi đã thực hiện khá một nghiên cứu trong vài ngày qua để làm cho chủ đề tumblr của tôi hoạt động chính xác. Tôi biết câu hỏi của tôi là phổ biến nhưng có vẻ như tôi không có đủ kiến ​​thức để tích hợp đúng các phần mã được đưa ra trong nhiều ví dụ tương tự.

My theme được cho là ghi đè giới hạn "15 bài viết trên mỗi trang" của tumblr và với tùy chọn "cuộn bất tận", nó sẽ đặt tất cả bài đăng của tôi (tất cả chúng đều) trong một trang vô tận. Vâng, nó không. Với một chút trợ giúp từ here, tôi đã quản lý để bọc {block: Posts} của tôi với và với một vài thay đổi ngẫu nhiên trong nề() gọi tôi đã kết thúc với this

Như bạn có thể thấy hình ảnh của tôi không chồng chéo (cuối cùng!) nhưng sau 15 bài đăng đầu tiên, có vẻ như một trang mới được tạo và các hình ảnh cuối cùng không được căn chỉnh chính xác.

đang nề jQuery của tôi là thế này:

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

tôi biết, một mớ hỗn độn của nó ... thực sự sẽ đánh giá cao sự giúp đỡ.

Answer 1

Tôi không được sử dụng để làm việc với tumblr, nhưng tôi có thể những gì đang xảy ra:

Line 110:

Kịch bản này đang tạo ra một div wrapper xung quanh các mục mỗi lần bạn gọi đến nề, vì sự kịch bản, mỗi lần tải giống như một trang mới, tôi nghĩ bạn có thể chỉ cần xóa nó.

Một số lời khuyên: Bạn không cần phải chờ đợi $ (cửa sổ) .load để thực hiện xây dựng, thay đổi nó bằng $ (function()

Để tránh hình ảnh chồng chéo sử dụng phương pháp appened nề và imagesLoad: Refer this

tôi thấy bạn đang sử dụng nề 1.0.1, hãy chắc chắn bạn đang sử dụng phiên bản cuối cùng nề (2.1.06)

Ví dụ mã:

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

và chắc chắn để loại bỏ các kịch bản cuối cùng trong khối tiêu đề này:

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

Hy vọng nó giúp