Кирпичная кладка и многое другое

Мне трудно понять, как применить Masonry к странице, когда LOAD MORE находится на месте. Я нашел похожие примеры и попытался применить код к своему делу, но он не работает.

Здесь я разместил фиктивный сайт http://test.pamplemoussejournal.com/.

Это то, что у меня есть для моих настроек кладки

var $container = jQuery('#masonry-grid');


$container.imagesLoaded( function(){
   jQuery('#masonry-grid').show();
   jQuery('#loading').hide();
    
   $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: 325,
     isFitWidth: true,
    isAnimated: true
   }); 

})

Когда я смотрю в инспекторе, div загружается, но не загружает кладку

<div id="masonry-grid" style="position: relative; width: 1300px; height: 916px;">

<div class="item" style="position: absolute; left: 0px; top: 0px;"></div>
<div class="item" style="position: absolute; left: 325px; top: 0px;"></div>
<div class="item" style="position: absolute; left: 650px; top: 0px;"></div>
<div class="item" style="position: absolute; left: 975px; top: 0px;"></div>
<div class="item" style="position: absolute; left: 325px; top: 316px;"></div>
<div class="item" style="position: absolute; left: 650px; top: 406px;"></div>
<div class="item" style="position: absolute; left: 975px; top: 423px;"></div>
<div class="item" style="position: absolute; left: 0px; top: 442px;"></div>
<div class="item"></div>
<div class="item"></div>

Я не чувствую, что append - это то, что мне нужно использовать, я думаю, что masonry('reload') - это то, что мне нужно, но я не могу понять это, потому что все, что я пробовал, не имело никакого эффекта.

Спасибо за любую помощь или указатели.


jquery masonry
person Amanda_    schedule 28.08.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня аналогичная проблема, и я решаю ее с помощью следующего кода:

//Here I attach the new loaded items (html var) in the #container div.
$("#masonry-grid").append(html).each(function(){
   $('#masonry-grid').masonry('reloadItems');
});         

$('#masonry-grid').imagesLoaded(function(){
   $('#masonry-grid').masonry();
});

Если вы хотите увидеть, как это работает и как это работает, вы можете посетить http://pintevent.com, чтобы убедиться, что это то же самое. желаемое поведение. Надеюсь, поможет!

person JP. Aulet    schedule 18.03.2016