jQuery Masonry nieskończenie przewijają się i obraz pokrywają się problemy z moim motywem tumblr

Question

Jestem nowy w programowaniu (javascript), ale w ciągu ostatnich kilku dni zrobiłem sporo badań, aby mój motyw tumblr działał poprawnie. Wiem, że moje pytanie jest powszechne, ale wydaje mi się, że nie mam wystarczającej wiedzy, aby poprawnie zinterpretować fragmenty kodu podane w wielu podobnych przykładach.

ma zastąpić ograniczenie "tumblr" 15 postów na stronie i opcję "nieograniczone przewijanie" powinno umieścić wszystkie moje posty (wszystkie z nich) na jednej niekończącej się stronie. Cóż, nie ma. Z niewielką pomocą z here udało mi się owijać {blok: posty} kilkoma przypadkowymi zmianami w wywoływaniu muru() i skończyłem z this

Jak widać moje zdjęcia nie zachodzą na siebie (nareszcie!), ale po 15 pierwszych wpisach wygląda na to, że nowa strona jest tworzona, a ostatnie zdjęcia nie są poprawnie wyrównane.

mój kod jQuery murarskie to:

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

wiem, jego bałagan ... naprawdę wdzięczny za pomoc.

Answer 1

Nie jestem przyzwyczajony do pracy z tumblr, ale mogę co się dzieje:

Line 110:

Ten skrypt tworzy div otoki wokół zapisów każdym razem zadzwonić do cięcia kostki brukowej, ze względu na skrypt, każde ładowanie wygląda jak nowa strona, myślę, że po prostu można go usunąć.

Kilka wskazówek: Nie trzeba czekać $ (Windows) .load wykonać beton, zmienić go przez $ (function()

Aby uniknąć obraz nakładający użytkowania appened metodę murze i imagesLoad: Refer this

widzę używasz murze 1.0.1, upewnij się, że używasz murowane ostatniej wersji (2.1.06)

Przykładowy kod:

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

i pamiętaj, aby usunąć ostatni scenariusz w tym bloku nagłówka:

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

Nadzieja pomaga