読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】Masonry 実装メモ

①とりあえずまずレイアウトをcssなどでだいたいつくっとく。

itemがmasonryのタイル1個1個のスタイル。ここでwidthやmarginプロパティを設定しておくとその通りにタイルが配置されるよう。
このタイルの横並びもdisplay:inline-blockで最初に処理しとく。

そんでcontainerがmasonryを適用させるエリアのボックス。

.item{
    width: -webkit-calc((100% - 60px) / 3);
    width: calc((100% - 60px) / 3);
    margin: 10px;
    /* float: left; */
    display: inline-block;
    background: #fff;
    vertical-align: top;
    padding: 20px 0;
}

.container {
    max-width: 1180px;
    /* max-width: 972px; */
    font-size: 0;
    position: relative;
    margin-bottom: 50px;
}

②html

<div class="container">
  <div class="item">
    <!-- ここにタイルの中の要素 -->
  </div><!-- item -->
  <div class="item">
    <!-- ここにタイルの中の要素 -->
  </div><!-- item -->
  <div class="item">
    <!-- ここにタイルの中の要素 -->
  </div><!-- item -->
  <div class="item">
    <!-- ここにタイルの中の要素 -->
  </div><!-- item -->
  <div class="item">
    <!-- ここにタイルの中の要素 -->
  </div><!-- item -->
</div><!-- container -->


jquery

masonryを使うとき注意したいのは、画像が読み込まれずにこの関数が呼び出されるとレイアウトが崩れるときがある。
その場合の対策のためimagesloaded.jsを使う。これを使って画像がちゃんと読み込まれたらmasonryを実行できる。


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script>
$(function(){
var $container = $('.container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
</script>  


wordpressのブログ機能でこれを使った。出力するアイキャッチ画像の高さをバラバラにしたらいい感じにレイアウトされる。
アイキャッチ画像をバラバラにするときは、出力する高さの最大幅を高めに設定し下記のような感じに最後のところをfalseにしてトリミングされないようにする。

add_image_size( 'blogsize1', 640, 1000, false );

【参考URL】
http://techmemo.biz/javascript/masonry/
http://arakaze.ready.jp/archives/1428