[英]How to add dynamic gutterWidth to jQuery Masonry?
我想使gutterWidth选项与columnWidth一样动态,因为我希望它与我正在处理的Wordpress网站的Twitter Bootstrap响应式布局一起使用。 布局使用20px或30px的装订线宽度,具体取决于窗口宽度。 我通过以下增强了_getColumns函数:
_getColumns:function(){
var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();
/* begin hack: read gutterWidth from int or function */
this.options.gutterWidth=(typeof this.options.gutterWidth=="function")?
this.options.gutterWidth(b):this.options.gutterWidth;
/* end hack */
这是我的初始化函数:
$(function(){
init_masonry();
});
function init_masonry() {
var $posts = $('#posts');
$posts.imagesLoaded(function() {
$posts.masonry({
itemSelector : 'article.post',
isAnimated: true,
isResizable: true,
gutterWidth: function(containerWidth) {
var window_width = $(window).width();
var gutter = (window_width < 1200) ? 20 : 30;
return gutter;
},
columnWidth: function(containerWidth) {
var window_width = $(window).width();
var gutter = (window_width <= 1200) ? 20 : 30;
var box_width = (containerWidth - (3 * gutter)) / 4;
return box_width;
}
});
});
}
它似乎适用于页面的第一次加载。 在我的13英寸笔记本电脑(窗口宽度> = 1200)上,它可以正常使用30px装订线。通过调整屏幕大小,该功能似乎无法更新为20px。
有人知道该如何解决吗?
预先感谢,莫里茨
我创建了一个拉取请求,以增加将函数传递给gutterWidth选项的可能性,就像columnWidth一样。
https://github.com/desandro/masonry/pull/295
也许您可以尝试此方法,并在问题中发表一些反馈。
在window.resize中添加一个砌体(“重新加载”)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.