Jquery Masonry:在调整窗口大小之前,排水沟不正确

前端之家收集整理的这篇文章主要介绍了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/

容器上的绿色背景只是为了帮助说明正在发生的事情.

多谢你们.

最佳答案
有同样的问题,通过在页面加载后调用布局方法解决它.不优雅,但它的工作原理.

$(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

原文链接:https://www.f2er.com/jquery/428163.html

猜你在找的jQuery相关文章