响应式砌体jQuery布局示例 [英] Responsive Masonry jQuery layout example

问题描述

有人可以建议该网站如何将jQuery Masonry插件用于其响应式，流畅的布局吗?

Can anyone suggest how this site uses the jQuery Masonry plugin for its responsive, fluid layout?

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

具体而言；

浏览器调整大小时，列数从3变为2到1，这是您希望使用砖石结构的网站所期望的，但是有趣的是，列的大小也进行了调整，以始终填充可用的整个宽度.我看到的大多数其他Masonry网站在列数变化时在列右侧留有空隙(例如 http://masonry.desandro.com/)或这些列填满整个宽度，但列数保持不变( http://masonry.desandro.com/demos/fluid.html ).他们是在结合CSS媒体查询来动态设置浏览器调整大小时的列数，还是在使用CSS3列?

The number of columns changes from 3 to 2 to 1 on browser resize which is what you expect from a site using masonry, but what's interesting is the columns also resize to always fill the full width available. Most other Masonry sites I've seen leave gaps to the right of the columns as the number of columns changes (e.g http://masonry.desandro.com/) OR the columns fill the full width but the number fo columns stays the same (http://masonry.desandro.com/demos/fluid.html). Are they dynamically setting the number of columns on browser resize combined with CSS media queries or maybe they're using CSS3 columns?

谢谢.

推荐答案

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

This is the Code we are looking at.

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事件.第三步是用动态"列宽调用砌体.玩得开心:)

The Basic idea seems to be to add a columnselector which finds out how many columns can be set. Second step is to use the smartresize event in the function. Third step is to call masonry with the "dynamic" width of columns. Have fun :)

这篇关于响应式砌体jQuery布局示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！