响应式 Masonry 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 :)

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