【jQuery】Pinterestのようなレスポンシブ画像グリッドMosaic Flow

Mosaic FlowはHTMLとjQueryを使ったPinterestのようなレスポンシブ画像グリッド。

JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mosaicflow.min.js"></script>

CSS

.mosaicflow__column {
float: left;
}
.mosaicflow__item img {
display: block;
width: 100%;
height: auto;
}

.mosaicflowを追加

<div class="clearfix mosaicflow">
<div class="mosaicflow__item">
<img src="1.jpg" width="500" height="300" alt="">
</div>
<div class="mosaicflow__item">
<img src="2.jpg" width="500" height="500" alt="">
</div>
…
</div>

設定

HTML,JavaScriptオブジェクトを介してのオプション

<div class="clearfix mosaicflow" data-item-selector=".item" data-min-item-width="300">
$('#mycontainer').mosaicflow({
itemSelector: '.item',
minItemWidth: 300
});

Options

  1. itemSelector (default: > *)
  2. columnClass (default: mosaicflow__column)
  3. minColumns (default: 2)
  4. minItemWidth (default: 240)
  5. itemHeightCalculation (default: auto)

Events

  1. mosaicflow-layout
  2. mosaicflow-start / mosaicflow-ready
  3. mosaicflow-fill / mosaicflow-filled
  4. mosaicflow-item-add / mosaicflow-item-added
  5. mosaicflow-item-remove / mosaicflow-item-removed

MITライセンス

 
Mosaic Flow

【jQuery】Pinterestのようなレスポンシブ画像グリッドMosaic Flow

  • LATEST
  • RELATED
  • POPULAR