Jquery Masonry: неправильные желоба до изменения размера окна

У меня есть контейнер процентной ширины с тремя столбцами. Я задаю этим столбцам отступы фиксированной ширины следующим образом:

width: -webkit-calc( 33.33% - 16px );
width: -moz-calc( 33.33% - 16px );
width: calc( 33.33% - 16px );

Это мой код Masonry, в котором я меняю количество столбцов при изменении размера окна:

$( window ).load( function() {
    var columns    = 3,
    setColumns = function() { columns = $( window ).width() > 959 ? 3 : $( window ).width() > 640 ? 2 : 1; };

    setColumns();
    $( window ).resize( setColumns );

    $( '#main-posts' ).masonry({
        itemSelector : '[class*=main-posts-]',
        columnWidth : function( containerWidth ) { return containerWidth / columns; }
    });
});

Промежутки между столбцами слишком велики при загрузке страницы, но они исправляются сами собой при изменении размера окна. Может ли кто-нибудь помочь мне с этим?

Вот ссылка на редизайн, который находится на очень ранней стадии разработки: http://keithpickering.net/redesign/

Зеленый фон на контейнере просто помогает проиллюстрировать происходящее.

Спасибо ребята.


html jquery css jquery-masonry
person Keith Pickering    schedule 06.02.2013    source источник
comment
Я видел тот же вопрос, который вы задали на CSS-трюки. Вы когда-нибудь находили решение? У меня та же проблема: желоба слишком велики, пока я не изменю размер окна.   -  person Jay Bee Why    schedule 18.09.2013

Ответы (1)


arrow_upward
4
arrow_downward

Была та же проблема, решил ее, вызвав метод макета после загрузки страницы. Не элегантно, но работает.

$(window).load(function(){ 

    var $container = $('#container');
    $container.masonry({
      gutter: 0,
      itemSelector : '.content-box',
      columnWidth: ".grid-sizer",
      isResizable: true,
    });
   /// call the layout method after all elements have been loaded
   $container.masonry();

});

http://masonry.desandro.com/methods.html#layout

person eurotrash    schedule 25.12.2013
comment
Вы правы, это работает. И это главное ;) - person Rex; 08.04.2016