我有一个有三列的百分比宽度容器.我给这些列固定宽度的排水沟像这样:
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();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。