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;
}
source to share
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')
});
});
source to share