javascript - jQuery Masonry layout is breaking when window is resized — fluid seamless photo grid - Stack Overflow

admin管理员组

文章数量:1387401

I have posted a video explaining my problem. Sorry for the slow frame rate.

When I shrink the window too fast, the Masonry jQuery plugin seems to be too slow to keep up and therefore breaks the layout when the browser is resized too quickly. Some of the items fall below the footer, and it looks obviously wrong.

When I reload the page, as seen in the video, the layout returns to normal.

I think it is a problem is smartresize

Here is the demo page: .php

This page successfully does it: /

the javascript:

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 = 2;
        else if( w_w <= 768 ) n = 3;
        else n = 4;
    },
    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: 300
                }
            });
        });
        $ctCollContainer.colladjust();
        $ctCollContainer.find('div.ct-coll-item-multi').collslider();
    };
    return { init: init };
})();
CollManag.init();
});

I have posted a video explaining my problem. Sorry for the slow frame rate.

When I shrink the window too fast, the Masonry jQuery plugin seems to be too slow to keep up and therefore breaks the layout when the browser is resized too quickly. Some of the items fall below the footer, and it looks obviously wrong.

When I reload the page, as seen in the video, the layout returns to normal.

I think it is a problem is smartresize

Here is the demo page: http://test.davewhitley./not-wp/isotope_test/index.php

This page successfully does it: http://tympanus/codrops/collective/collective-2/

the javascript:

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 = 2;
        else if( w_w <= 768 ) n = 3;
        else n = 4;
    },
    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: 300
                }
            });
        });
        $ctCollContainer.colladjust();
        $ctCollContainer.find('div.ct-coll-item-multi').collslider();
    };
    return { init: init };
})();
CollManag.init();
});

• javascript
• jquery
• resize
• jquery-masonry
• window-resize

Share Improve this question Follow asked Mar 6, 2012 at 19:01 davecavedavecave 4,81866 gold badges2929 silver badges3434 bronze badges 2

• How did you fix this in the end? I noticed the site is live now so assume you've fixed it? I have exactly the same problem, would love to know what you did to get it working?? – egr103 Commented Jul 11, 2012 at 17:58
• www.davewhitley. just uses CSS to create the fluid grid of thumbnails since all of the images are square. I ditched the javascript approach just to keep it simple. My test site that I linked above mostly works, but when you resize the window, the images fall below the footer sometimes. If you e up with a solution, please post it here. – davecave Commented Jul 13, 2012 at 0:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I had the same issue. I used bindResize on windows resize. I found this solution on their website

Masonry Methods

bindResize is at masonry.pkgd

$container.masonry({
    itemSelector: '.container'
});

$(window).resize(function () {
    $container.masonry('bindResize')
});

Great work by the way.

At certain points, yes, the layout goes a little crazy. Surely this is just down to the way browsers handle percentage widths + masonry. Great little tip below:

Make your container smaller, but your images larger.

.mycontainer { width: 24%; ) .mycontainer img { width: 101%; height: auto; )

http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/

本文标签： javascriptjQuery Masonry layout is breaking when window is resizedfluid seamless photo gridStack Overflow