Freemasonry effect without delay when resizing

TL; DR: See this fiddle - pretty much all I'm looking for is JavaScript that will close the gaps between floated elements like these without delay when existing libraries are resized.

Longer version: . So, as I understand it, there are two main libraries for creating walls from solid elements; Masonry and Isotope .

However, aside from suspiciously similar websites, both of these libraries have the same oddity when it comes to resizing the viewport with fluid / sensing elements. Each element of Freemasonry first changes individually (creating large gutters), and then strikes later, takes on a new form. See here here or here .

I seem to be the only one who thinks this is ugly.

How can I achieve the same masonry effect, but with a more "natural" resizing (ie, no delay), given the element width as a percentage and the gutter?

Here is the CSS I have now:

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

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

      

+3


source to share


1 answer


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

the result of the selected masonry items after the window is resized is a bit funny, so I added a window resize event to reload it when the window is resized



$(function () {

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

});

      

+1


source







All Articles