JQuery砌体! 更新columnWidth On Window Resize
我正在开发响应式布局,我也在使用JQuery Masonry。
我正在使用以下脚本来获取当前列宽。
var curWidth; var detector; detector = $('.magic-column'); curWidth = detector.outerWidth(true); $(window).resize(function(){ if(detector.outerWidth(true)!=curWidth){ curWidth = detector.outerWidth(true); } });
我的JQuery Masonry init脚本是这样的..
$(window).load(function(){ $(function (){ $wall.masonry({ singleMode: true, columnWidth: curWidth, // This needs to be update on window load & resize both // }); }); });
我的第一个脚本是正确获取宽度,但在砌体中宽度没有更新…我如何实现加载和resizefunction,以便我的curWidth将更新为砌体以及窗口resize
您需要在resize后设置砌体的columnWidth:
$(window).resize(function(){ if(detector.outerWidth(true)!=curWidth){ curWidth = detector.outerWidth(true); $wall.masonry( 'option', { columnWidth: curWidth }); } });
Yuo可以在这里阅读更多关于砌体方法的内容: http : //masonry.desandro.com/methods.html
使用流体布局时,bindResize可用于调整容器中的所有项目( bindResize
位于https://github.com/desandro/masonry/blob/master/dist/masonry.pkgd.js
$container.masonry({ itemSelector: '.container' }); $(window).resize(function () { $container.masonry('bindResize') });