floatさせた要素をレンガ風に整列してくれるjQuery Masonryのデモページ

色分けしています

このページは参考サイト：CSS Lecture様のデモページを参考に作らせていただきました。

HTML　<div style="float:none; position: absolute; display: block; top: 0px; left: 0px; background-color:#000;" class="box">

ピンクの部分が、boxによって変わってます。

2つ目のboxのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 0px; left: 220px; background-color:#000;" class="box">

3つ目のboxのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 0px; left: 440px; background-color:#000;" class="box">

4つ目のboxのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 0px; left: 660px; background-color:#000;" class="box">

テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

5つ目のboxのdivのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 126px; left: 440px; background-color:#000;" class="box">

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

6つ目のboxのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 229px; left: 220px; background-color:#000;" class="box">

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

7つ目のboxのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 229px; left: 220px; background-color:#000;" class="box">

8つ目のboxのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 324px; left: 440px; background-color:#000;" class="box">

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ キスト

9つ目のboxのdivのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 397px; left: 660px; background-color:#000;" class="box">

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

10つ目のboxのdivのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 470px; left: 0px; background-color:#000;" class="box">

キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

10つ目のboxのdivのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 542px; left: 220px; background-color:#000;" class="box">

キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

11つ目のboxのstyle

HTML　<div style="float:none; position: absolute; display: block; top: 699px; left: 0px; background-color:#000;" class="box">