JQuery The mock layout breaks when the window is resized.

Question

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

When I squeeze the window too fast, the jQuery plugin for Freemasonry seems too slow to keep up and therefore breaks the layout when the browser changes too fast. Some elements fall below the footer, and this looks obviously wrong.

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

I think this is smartresize problem

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

This page successfully does this: http://tympanus.net/codrops/collective/collective-2/

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

Answer 1

Great job, by the way.

In some cases, yes, the layout goes a little crazy. Of course, it just depends on how browsers handle percentage width + masonry. Great little tip below:

Reduce the size of the container, but your images are larger.

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

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

Answer 2

I had the same problem. I used bindResize when resizing the window. I found this solution on my website

Methods of Freemasonry

bindResize is located in masonry.pkgd

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