任何人都可以建议这个网站如何使用jQuery Masonry插件来进行响应灵活的布局？
http://tympanus.net/codrops/collective/collective-2/
特别;
在浏览器调整大小时,列数从3到2变为1,这是您从使用砖石的网站预期的,但有趣的是列也调整大小以始终填满可用的全宽.我看到的大多数其他砌体网站随着列数的更改(例如http://masonry.desandro.com/)或栏填充完整宽度,但是列数保持不变(http://masonry.desandro.com/demos/fluid.html),列的右侧留下空白.他们是否动态设置浏览器调整大小的列数与CSS媒体查询相结合,或者他们是否使用CSS3列？
谢谢.
解决方法
这是我们正在看的代码.
jQuery(document).ready(function($) {
var CollManag = (function() {
var $ctCollContainer = $('#ct-coll-container'),collCnt = 1,init = function() {
changeColCnt();
initEvents();
initPlugins();
},changeColCnt = function() {
var w_w = $(window).width();
if( w_w <= 600 ) n = 1;
else if( w_w <= 768 ) n = 2;
else n = 3;
},initEvents = function() {
$(window).on( 'smartresize.CollManag',function( event ) {
changeColCnt();
});
},initPlugins = function() {
$ctCollContainer.imagesLoaded( function(){
$ctCollContainer.masonry({
itemSelector : '.ct-coll-item',columnWidth : function( containerWidth ) {
return containerWidth / n;
},isAnimated : true,animationOptions: {
duration: 400
}
});
});
$ctCollContainer.colladjust();
$ctCollContainer.find('div.ct-coll-item-multi').collslider();
};
return { init: init };
})();
CollManag.init();
});
基本思想似乎是添加一个列选择器,它可以找出可以设置多少列.第二步是使用smartresize event的功能.第三步是用“动态”的列宽调用砖石.玩的开心 ：)
