Блог

Главная - Вопросы по программированию - загрузка кладки в виде 1 столбца после загрузки ajax

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

#jquery #ajax #jquery-masonry

#jquery #ajax #jquery-кладка

Вопрос:

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

Это похоже на то, что кладка не знает ширину клиента после запроса ajax, а затем отключается от него при изменении размера окна.

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

Комментарии:

1. Нет онлайн-песочницы, нет jsfiddle — трудно сказать, где могут быть ваши ошибки. Для начала кладке требуется правильная ширина элементов для правильной компоновки, поэтому может быть, вам нужно отложить обратный вызов кладки.

2. Я испытываю это сейчас, вы нашли какое-либо решение? помимо вызова перезагрузки?

Ответ №1:

Оберните свой вызов кладки в 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();
});

Ответ №2:

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

 $(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 amp;amp; 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 на стороне сервера:

{
большие пальцы: [{
высота: 250
больших пальцев: «/uploads/thumbs/image.jpg »
twidth: 167.1875
}]
}

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