pinterestの様な日記のコンテンツ等を上からそれぞれの大きさに合わせ、三列表示で自動にレイアウトしたい。

必要なものはjQueryライブラリのみ

<script src=”https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.js”></script>

このコードをhead内に記述し、htmlで親要素に対してクラス名「js-masonry」を追加すればOKです。
簡単なものであればCSSはこんな感じ。

<style type=”text/css”>
* {
margin: 0;
padding: 0
}
#menus section {
width: 33.33%;
min-width: 200px;
}
#menus section .inner {
margin: 5px;
padding: 10px;
border: 1px solid #999;
}
</style>