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.


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -