JQuery Масонство ломается после первого изображения, загружает странные пробелы

Question

Я реализую масонство с бесконечным прокруткой по теме Tumblr - что-то, что я успешно сделал раньше, но я просто не могу заставить это остановить «нарушение», и рассеивание изображений вокруг. Отчаяние!

Демо-версия: neuraldamage-theme4.tumblr.com (пароль гость).

Я попытался удалить все из тега тела, кроме #posts div и его содержимого (и, конечно же, скрипта), но проблема осталась - поэтому кажется, что это не должно быть проблемой с окружающие divs.

Вот мой сценарий:

$(document).ready(function() { 
    $('#post-video iframe').attr('width', '300'); // resize embedded videos 
}); 

var $container = $('#posts'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector : '.post', 
     columnWidth : 300 
    }); 
}); 

$container.infinitescroll({ 
    navSelector : '#pagination', // selector for the paged navigation 
    nextSelector : '#pagination li a.pagination_nextlink', // selector for the NEXT link (to page 2) 
    itemSelector : '.post',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: '', 
     img: 'http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif', // http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif, http://static.tumblr.com/6u5yyqj/yWkmgj1jq/loadingdark.gif 
    } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
     var $newElems = $(newElements); 
     $container.masonry('appended', $newElems); 
    } 
); 

И вот что я встроили, просто убедитесь, что оно было до настоящего времени:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://static.tumblr.com/6u5yyqj/MPKmktfkv/jquery.masonry.min.js"></script> 
<script src="http://static.tumblr.com/6u5yyqj/nsQmkth3k/jquery.infinitescroll.min.js"></script> 

И если вы 'd, чтобы увидеть полный код: gist.github.com/neuraldamage/5307289

Если кто-то может взломать это, я был бы очень благодарен!

Answer 1

Это запугивание проблем, потому что на самом деле у вас есть несколько <div id="posts">. Вероятно, проблема с вашим кодом Tumblr выплевывает больше, чем нужно.

Answer 2

Вопрос заключается в следующем:

<div id="posts" style="position: relative; height: 483px;" class="masonry"> 

изменение, высота для размещения вашего контента (как это не достаточно большой), или просто не объявить его вообще.

Когда я осмотрел элемент, я просто удалил значение height, и все переместилось на место.