Masonry/Isotope/Freetile などは、グリッド/コンテナー内の要素の絶対配置に優れています。
ただし、要素がグリッド/コンテナの全幅を占めると、許容できる結果ではない大きなギャップが生じます。
ここに私の問題に対するjsfiddleがあります： http://jsfiddle.net/QNf3A/1/
赤の div の上に、緑の div を配置するのに十分なスペースがあります。ただし、さまざまなライブラリは、「ギャップを残さない」という哲学とは対照的に、フローを尊重する傾向があります。
ギャップを回避するための代替 js ライブラリまたは同様のトリックを知っている人はいますか?
-
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
});
});