загрузка кладки как 1 столбец после загрузки ajax - PullRequest
Новая
       2

загрузка кладки как 1 столбец после загрузки ajax

1 голос
/ 20 октября 2011

Я использую кладку для своих предметов портфолио.Когда я перехожу на страницу напрямую, она загружает плитки в соответствующие столбцы.Тем не менее, мой веб-сайт загружается с использованием pjax, и когда я загружаю страницу портфолио, все элементы портфеля загружаются в один столбец до тех пор, пока я не изменю размер окна.клиент после ajax-запроса, а затем снимает его при изменении размера окна.

Кто-нибудь имеет опыт работы с каменной кладкой, который знает, что я испытываю?

Ответы [ 2 ]

0 голосов
/ 28 декабря 2013

Попробуйте это 

$(window).load(function(){
var $container = $('#image_gallery');
$container.masonry({
    columnWidth: 230,
    itemSelector: '.brick'
});

$.ajax({
    url: 'url',
    type: 'post',
    success:function(response){
        response = JSON.parse(response);
        if(response.thumbs && response.thumbs.length > 0){
            $.each(response.thumbs, function(i, img){
                var eleHeight = (img.theight/img.twidth)*220;
                item += '<div class="brick" style="height:'+eleHeight+'px;width:220px"><a href="#">';
                item += '<img src="' + img.thumbUrl + '" /></a></div>';
    });
    }
    var $boxHtml = $(item);
        $container.append($boxHtml).masonry('appended', $boxHtml, true);
    }
});
});

Вывод JSON на сервере:
{thumbs: [{theight: 250 thumbUrl: "/uploads/thumbs/image.jpg" twidth: 167.1875}]}

Примечание. Настройте свойство columnWidth в соответствии с шириной элемента div.(например, если у кирпича div есть отступы влево и вправо 5px, тогда общая ширина составляет 220 + 10, т.е. 230px, как в приведенном выше коде)

0 голосов
/ 15 сентября 2013

Оберните ваш вызов каменной кладки в ajaxComplete, чтобы он срабатывал после загрузки ajax. 

$( document ).ajaxComplete(function() {
  console.log("Ajax finished"); //remove this if you want, useful for debugging
      $(document).ready(function() {
      $('#content').masonry({
       columnWidth: 260, //change this accordingly
       itemSelector: '.item'
      });
    });
});

Просто боролся с этим сам.

лучшее решение здесь: 

$(document).ready(function() {
      $('#admin_content').masonry({
       columnWidth: 260,
       itemSelector: '.masonry-item',
       isAnimated:true,
                animationOptions: {
                    duration: 500,
                    easing:'swing',
                    queue :false
               }
      });
    });
$( document ).ajaxComplete(function() {
    $('#admin_content').masonry('reloadItems').masonry();
});
...