javascript - Force Masonry/similar to ignore flow and fill gaps instead -
masonry/isotope/freetile , rest great job @ absolute positioning elements in grid/container.
however, when element takes full width of grid/container, creates massive gaps not acceptable outcome.
here jsfiddle problem: http://jsfiddle.net/qnf3a/1/
there's enough room on top of red div place green one. however, different libraries tend respect flow opposed "leave no gaps" philosophy.
does know of alternative js library or similar trick avoid gaps?
-
code jsfiddle...
html:
<div id="container"> <div class="block half"></div> <div class="block full"></div> <div class="block half"></div> <div class="block half"></div> <div class="block half"></div> </div>
css:
#container{ width: 600px; background-color: #eee; } .block{ float: left; } .half{ width: 300px; height: 100px; background-color: #cfc; } .full{ width: 600px; height: 100px; background-color: #fcc; }
js/jquery:
$(function($) { $('#container').masonry({ itemselector: '.block', columnwidth: 300 }); });
i found this:
https://github.com/drewdahlman/mason
and seems trick.