From 4515c9c288661e77721f0133ed90e49fb61577c7 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 13 Jul 2016 10:37:59 +0000 Subject: [PATCH] Prevent gaps and alignment issues with Masonry. WIP #541 @0.5 --- js/410-features.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/js/410-features.js b/js/410-features.js index 94d79b8..5b21c7e 100644 --- a/js/410-features.js +++ b/js/410-features.js @@ -2,18 +2,33 @@ registerLoader(load_features); function load_features() { + $(window).on('cubeitresize', resizeFeatureBlocks); + resizeFeatureBlocks(); + $(".feature-blocks").masonry({ itemSelector: ".feature-block", - //fitWidth: true, columnWidth: ".small-rectangle-tall", transitionDuration: 0, }); - // $('.feature-blocks').cement({ - // columns: 6, - // columnMinWidth: 200, - // horizontalGutter: 0, - // verticalGutter: 0 - // }); +} + +// Ensure that the container is a round number that can be +// evenly divided by the number of columns. This stops +// Masonry from having gaps and mis-aligned items +function resizeFeatureBlocks() { + // Container width is 90% of the window + var ww = $(window).width(), + break2cols = 1350, + break1col = 767, + cols = 6, + containerWidth; + + if (ww <= break2cols) cols = 2; + if (ww <= break1col) cols = 1; + + // Make sure width is a round number that can be divided by the number of columns + containerWidth = Math.floor($('main').width() * 0.9 / cols) * cols; + $('.feature-blocks').width(containerWidth); } \ No newline at end of file -- 2.39.5