13

谁能建议这个网站如何使用 jQuery Masonry 插件来实现其响应式、流畅的布局？

http://tympanus.net/codrops/collective/collective-2/

具体来说;

在浏览器调整大小时，列数从 3 变为 2 再变为 1，这是您对使用 masonry 的站点所期望的，但有趣的是列也会调整大小以始终填充可用的整个宽度。我见过的大多数其他砌体网站会随着列数的变化（例如http://masonry.desandro.com/）在列的右侧留下空白，或者列填充全宽但列数保持不变（http://masonry.desandro.com/demos/fluid.html）。他们是动态设置浏览器调整大小与 CSS 媒体查询相结合的列数，还是他们正在使用 CSS3 列？

谢谢。

4

1 回答 1

16

这是我们正在查看的代码。

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 事件。第三步是使用列的“动态”宽度调用砌体。玩得开心 ：）

于 2012-02-11T19:05:02.300 回答