13

このサイトが 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 列を使用していますか?

ありがとう。

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();
});

基本的な考え方は、設定できる列の数を見つける columnselector を追加することのようです。2 番目のステップは、関数でsmartresize イベントを使用することです。3 番目のステップは、列の「動的な」幅で組積造を呼び出すことです。楽しむ ：）

于 2012-02-11T19:05:02.300 に答える