Jquery砌石:在调整窗口大小之前,水槽不正确
我有一个具有三列的百分比宽度容器。我给这些柱子定宽排水沟如下:Jquery砌石:在调整窗口大小之前,水槽不正确,jquery,html,css,jquery-masonry,Jquery,Html,Css,Jquery Masonry,我有一个具有三列的百分比宽度容器。我给这些柱子定宽排水沟如下: width: -webkit-calc( 33.33% - 16px ); width: -moz-calc( 33.33% - 16px ); width: calc( 33.33% - 16px ); 这是我的砌体代码,在该代码中,随着窗口大小的调整,我更改了柱数: $( window ).load( function() { var columns = 3, setColumns = function(
width: -webkit-calc( 33.33% - 16px );
width: -moz-calc( 33.33% - 16px );
width: calc( 33.33% - 16px );
这是我的砌体代码,在该代码中,随着窗口大小的调整,我更改了柱数:
$( 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; }
});
});
加载页面时,立柱之间的檐槽太大,但调整窗口大小时,它们会自动更正。有人能帮我解决这个问题吗
以下是重新设计的链接,它处于开发的早期阶段:
容器上的绿色背景只是为了帮助说明正在发生的事情
谢谢大家。也有同样的问题,在页面加载后调用布局方法解决了这个问题。不优雅,但它的工作
$(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();
});
我看到了你在上一节课上问的同一个问题。你找到解决办法了吗?我也有同样的问题:在我调整窗口大小之前,排水沟有点太大了。你说得对,它可以工作。这才是最重要的;)