Каменная кладка

Question

Я замечаю, что моя страница кладки создает перекрытие и неравный интервал. Это непротиворечиво и, кажется, иногда случается, в то время как в другое время это работает нормально. В каждом случае, если я немного изменю размер моего окна, функция 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> 

Answer 1

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

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

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

Приветствия,

Jake

Answer 2

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

$container.masonry('reloadItems'); 

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