Перекрытие кладки

Я замечаю, что моя страница каменной кладки создает перекрытие и неравный интервал. Это непостоянно и, похоже, иногда происходит, а в другое время работает нормально. В каждом сценарии, если я немного изменяю размер окна, функция mason() срабатывает и исправляет это. Первоначально я думал, что проблема заключается в том, чтобы ждать загрузки изображений (за один раз загружается около 30), но я уже реализовал imagesLoaded и не вижу разницы. Кто-нибудь может указать на мою ошибку?

<script>  
   function mason() {
    var $container = $('#dealcontainer').masonry({
            itemSelector: '.outerdeal',
            columnWidth: '.outerdeal'
        });
    $container.imagesLoaded(function(){
        $container.masonry();
    });
   }
   function colorize()
   {
    $('.dealfilterli').click(function (event) {
           if (event.target.type !== 'checkbox') {
               $(':checkbox', this).trigger('click');
           }
           $("input[type='checkbox']").change(function (e) {
               if ($(this).is(":checked")) {
                   $(this).closest('li').addClass("colorize");
               } else {
                   $(this).closest('li').removeClass("colorize");
               }
           });
       });
   }
   function InitInfiniteScroll(){
    $('#dealcontainer').infinitescroll({
        navSelector  : "div.pagination",
        nextSelector : "div.pagination li a",
        itemSelector : "#deals div.outerdeal",
        loading:{
            finishedMsg: '',
            img: 'http://www.example.com/img/icons/site/spinner.gif',
            msgText: '',
            speed: 'fast',
        },
    },function(newElements) {
        var $newElems = $( newElements );
                    $('#dealcontainer').masonry( 'appended', $newElems );
        mason();
    });
   }
   $( document ).ready(function() {
    InitInfiniteScroll();
    colorize();

   });
   $(window).resize(function() {
    InitInfiniteScroll();
    mason();
   }).resize();
</script>

masonry jquery-masonry
person user2694306    schedule 30.01.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

У меня была точно такая же проблема, несмотря на использование imagesLoaded, и после множества проб и ошибок я обнаружил, что проблему можно решить с помощью функции setTimeout. Вот пример из моего проекта:

setTimeout(function() {
        masonryContainer.imagesLoaded(function() {
        masonryContainer.prepend(newPost);
        masonryContainer.masonry('prepended', newPost);
        });
    }, 500);

Тайм-аут в 500 мс является произвольным, поэтому я бы поэкспериментировал с ним на вашей странице, чтобы найти минимально возможное значение, которое по-прежнему устраняет вашу проблему. Надеюсь, это поможет!

Ваше здоровье,

Джейк

person jacobedawson    schedule 09.05.2015

arrow_upward
0
arrow_downward

Вы должны использовать:

$container.masonry('reloadItems');

в функции mason(), и все будет заменено на правильное место.

person JP. Aulet    schedule 18.03.2016