Responsive Masonry jQuery Layout Beispiel

Question

Kann jemand vorschlagen, wie diese Website verwendet das jQuery Masonry Plugin für seine reaktionsschnelle, flüssige Layout?

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

Konkret;

Die Anzahl der Spalten ändert sich bei der Größenänderung des Browsers von 3 auf 2 auf 1, was man von einer Website, die Mauerwerk verwendet, auch erwartet, aber das Interessante ist, dass die Spalten auch die volle verfügbare Breite ausfüllen. Die meisten anderen Masonry-Sites, die ich gesehen habe, lassen rechts von den Spalten Lücken, wenn sich die Anzahl der Spalten ändert (z. B. http://masonry.desandro.com/ ) ODER die Spalten füllen die volle Breite, aber die Anzahl der Spalten bleibt gleich ( http://masonry.desandro.com/demos/fluid.html ). Wird die Anzahl der Spalten bei der Größenänderung des Browsers in Kombination mit CSS-Media-Queries dynamisch festgelegt oder werden CSS3-Spalten verwendet?

Danke.

Answer 1

Dies ist der Code, mit dem wir uns befassen.

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

Die Grundidee scheint zu sein, einen Spaltenselektor hinzuzufügen, der herausfindet, wie viele Spalten eingestellt werden können. Der zweite Schritt ist die Verwendung des smartresize Ereignis in der Funktion. Der dritte Schritt ist der Aufruf von masonry mit der "dynamischen" Breite der Spalten. Viel Spaß :)