Question

TL;DR: See this fiddle – pretty much all I’m looking for is a JavaScript doohickey that would fix the gaps between floated elements such as these, without the delay when resizing that existing libraries have.

Longer version: So as I understand it, there are two major libraries for creating walls of tightly-knit elements; Masonry and Isotope.

However, apart from the suspiciously similar websites, both these libraries have the same oddity when it comes to resizing the viewport with fluid/responsive elements. Each masonry’d element first resizes individually (creating larger gutters), and then a beat later, gets re-arranged to the new form. See it here or here.

It seems I’m the only one who thinks this is ugly.

How can I achieve the same masonry effect, but with more ‘native’ looking resizing (i.e. one without the delay), considering an element width set in percentages, and gutters?

Here’s the CSS I have now:

#wrapper {
    width: 100%;
    overflow: hidden;
}

#wrapper > div {
    width: 46%;
    margin: 0 2% 15px;
    float: left;
}

Answer 1

http://jsfiddle.net/UTB5C/3/

the result of masonry selected elements after resizing the window are a bit funny so i have added a resize event on the window to reload when window resized

$(function () {

    $('#wrapper').masonry({
        itemSelector: 'div',
        isResizable: true,
        gutterWidth: 5
    });
    $(window).on("resize", function () {
            $('#wrapper').masonry('reload')
    });

});