Prevent gaps and alignment issues with Masonry. WIP #541 @0.5

diff --git a/js/410-features.js b/js/410-features.js
index 94d79b8ad575802c149424095a213d17a233564f..5b21c7ee2ba936434fdf6e311de09da58933defe 100644 (file)
--- 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