fullscreen - Jquery Masonry Seamless Responsive Image Grid

Question

I'm looking to create a seamless (no gutters) fullscreen image grid using jquery masonry, where the images are fully responsive and are of varying widths. I've found a couple other starting points out there, but it's proving to be quite difficult for my amount of jquery knowledge.

This is what I'm going for: http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg

And this is what I have so far: http://future.thefutureforward.com/~cycles/archive-test-fluid.html

HTML (just a portion):

<div id="masonry-container">  
    <div class="box nav-container">
        <div id="bumble-bee-sub"><a href="[[~1]]"><img src="assets/img/bumble_bee.png" alt="Cycles d'Autremont" title="Cycles d'Autremont" /></a></div>
        <ul id="nav-masonry">
            <li><a href="#">Featured</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#" class="active">Blog</a></li>
        </ul>
    </div>  
    <div class="box">
        <a href="#">
            <img src="assets/images/archive-thumbs/one.jpg" alt="" title="" />
            <span class="bike-name"><span>Bicycle #001</span></span>
        </a>
    </div>
    <div class="box">
        <a href="#">
        <img src="assets/images/archive-thumbs/two.jpg" alt="" title="" /> 
        <span class="bike-name"><span>Bicycle #002</span></span>
        </a>
    </div>
    <div class="box">
        <a href="#">
        <img src="assets/images/archive-thumbs/three.jpg" alt="" title="" />
        <span class="bike-name"><span>Bicycle #003</span></span>
        </a>
    </div>
</div>

CSS for each "box":

.box{
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
max-width: 33.3%; /* since we're going for three across... */
}
.box img {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    max-width:100%;
    display:block;
}

And here's the jQuery that's doing most the heavy-lifting:

jQuery(document).ready(function($) {
        var CollManag = (function() {
            var $ctCollContainer = $('#masonry-container'),
            collCnt = 1,
            init = function() {
                changeColCnt();
                initEvents();
                initPlugins();
            },
            changeColCnt = function() {
                var w_w = $(window).width();
                if( w_w <= 600 ) n = 2;
                else n = 3;
            },
            initEvents = function() {
                $(window).on( 'smartresize.CollManag', function( event ) {
                    changeColCnt();
                });
            },
            initPlugins = function() {
                $ctCollContainer.imagesLoaded( function(){
                    $ctCollContainer.masonry({
                        itemSelector : '.box',
                        columnWidth : function( containerWidth ) {
                            return containerWidth / n;
                        },
                        isAnimated : true,
                        animationOptions: {
                            duration: 300
                        }
                    });
                });
            };
            return { init: init };
        })();
        CollManag.init();
    });

It's getting there, but at certain widths it's not filling all of the gaps properly, and smaller screen sizes need some work. If anyone has any tips or thoughts on how to improve this, that would be amazing.

Answer 1

Voids in Isotope layouts can occur, because the Isotope items appear in a certain order (top down) in the DOM and - if there are items spanning two columns or three, or if there are items not conforming to the column width - therefore want to rearrage in that original order, when the browser is resized. This can be seen here or here (with jsfiddle) when the browser window is resized sufficiently - even such strict conformity can result in some voids at certain browser sizes. Shuffling could result in an optimal fit, but not necessarily so.

One could use sorting to order the items; for that to work, they must conform to width and height multiples of one item (with appropriate margins applied). With Isotope, you have Masonry plus much more functionality while it is similarly easy to implement. Best is to think about what the layout should do for the viewer, maybe on paper first, then mock-up an undesigned sandbox, keeping the modularity issue in mind.

UPDATE If you examine your sandbox with Google Chrome's devtools, you'll see that

1. your nav-container has no size set; it's size x=426/y=469px only depends on its content; you should set a size in CSS that conforms to the sizing scheme of your other items which, if you look the smallest common divisor, is x=240px (240(1), 480(2), 720(3)/y=120px (240(2), 360(3), 720(6)).

2. like i mentioned above, you have elements spanning multiple columns and rows; therefore at certain browser window sizes, voids will be inevitable. If you select black as #isotope-container background in the end, this will be less noticeable, as black is your bike images background colour.

3. don't know how that #twenty-seventh-letter interferes, but see the changed jsfiddle how to achieve a little bit of bleed on the right before Isotope triggers layouting. But, because of layouting (Masonry, Isotope), which is the whole purpose here, you can not have bleed at all sizes - for that, you'd need to code boxes with fluid widths also, which can be done with some extra effort.