Кирпичная кладка перекрывается с ImagesLoaded без Infinite Свиток в Tumblr

Question

первый раз здесь. Я пытаюсь создать свою тему tumblr с тремя столбцами, используя плагин Masonry, но я не так хорошо. Сообщения перекрываются, и я даже не использую Infinite Scroll. Я попытался использовать $ (window) .load (...), но это не сработало, я попытался использовать ImagesLoaded, но он тоже не работал, помогите мне^-^ Так загружается страница: http://s16.postimg.org/u17syta51/image.jpg, если я изменил размер/обновил страницу, они перейдут в нужное положение. Это мой полный код: http://pastebin.com/VLzwEfgP и мой тестовый tumblr url - entertain-us.tumblr.com (я не могу поставить +2 ссылки). Obs: тема еще не завершена, потому что я не знаю, как решить эту проблему.

JQuery (это перед тем </body>):

var $container = ('section#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: 'article.post', 
     columnWidth: 400, 
     isFitWidth: true, 
    }); 
}); 

CSS

section#container { 
    position: relative; 
    top: 50px; 
    max-width: 1250px; 
    height: auto; 
    padding: 0px; 
} 

article.post { 
    width: 400px; 
    margin: 5px; 
    margin-bottom: 10px; 
    opacity: 0.7; 
} 

article.post:hover { 
    opacity: 1; 
} 

Почти 2 года я не программа, так что если я сделал любую глупую ошибку в моем коде, я был бы признателен знать ха-ха

Извините, за ошибку на английском языке и благодарю вас за внимание: D

--- РЕШЕНИЕ ---

Чтобы решить проблему перекрытия, как сказал Macsupport, мне просто нужно поместить код масонства внутри $ (документ) .ready, таким образом

var $container = $('section#container');  
$(document).ready(function(){  
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      columnWidth: 400, 
      itemSelector: 'article.post', 
      isFitWidth: true 
     }); 
    }); 
}); 

я поставил var $container = $('section#container'); до $(document).ready();, потому что скрипт менял ширину моего контейнера до 800px (создавая только 1 столбец), и когда я устанавливаю переменную, прежде чем активировать скрипт, она не изменит ее ширину, я могу просто положить isResizeBound: false внутри кладки, но я все еще собираюсь попробовать сделайте этот макет измените его макет в зависимости от размера окна, когда я получу успех на нем, я обновлю здесь. Но на данный момент проблема перекрытия была решена.

Answer 1

У вас есть некоторые ошибки в вашем js.

Вы пропускаете $ для JQuery в переменной контейнера:

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

Должно быть так:

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

Попробуйте этот код:

var $container = $('section#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
       itemSelector: 'article.post', 
       columnWidth: 400, 
       isFitWidth: true 
      }); 
     }); 

ДОБАВЛЕНИЕ

Путь это код внутри вашего

$(document).ready(function(){ 

}); 

не вне его, как сейчас. Кроме того, почему вы переименовали свои imagesLoaded.js?