响应式砌体jQuery布局示例

任何人都可以建议这个网站如何使用jQuery Masonry插件进行响应,流畅的布局?

Collective #2

特别;

浏览器resize的列数从3变为2,这是您对使用砌体的网站的期望,但有趣的是列也会resize以始终填充可用的整个宽度。 我见过的大多数其他砌体网站都会在列的右侧留下间隙,因为列数会发生变化(例如http://masonry.desandro.com/ )或者列填充整个宽度但列数保持不变( http://masonry.desandro.com/demos/fluid.html )。 他们是否动态设置浏览器resize与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(); }); 

基本思路似乎是添加一个columnselector,它可以找出可以设置多少列。 第二步是在函数中使用smartresize事件 。 第三步是用“动态”宽度的列调用砖石。 玩得开心 :)