Pinterest風なグリッドレイアウトを簡単に実装する「jQuery.waterfall」

「jQuery.waterfall」はPinterest風な高さの異なるタイルが並ぶあのグリッドレイアウトを簡単に実装できるjQueryプラグインです。

jQuery.waterfall

screenshot339

自分で作る実装方法を紹介した記事もあるので勉強がてら試してみるのもよいですが、プラグインをつかってさくっと作ってしまうのも効率がよいですね。

Demo画面で用意されたオプションを変更するとどのようにグリッドが変更するのかを試すことができます。なかなか楽しいです。

screenshot340

 

それでは「jQuery.waterfall」の実装方法をご紹介します。まずはjQueryとzeptoを含む外部ファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/zepto.js"><\/script>')</script>
<script src="jquery.waterfall.js"></script>

 

HTMLはこのようにマークアップします。divタグでグリッドレイアウトのオプションを指定することができます。上記リンク先のDemoで変更するとどうなるのか試すことができます。

<div class="waterfall" 
  data-col-min-width="200"
  data-default-container-width="800" 
  data-col-class="content-column" 
  data-autoresize="true"> 
  <div class="tile">
    Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1
  </div> 
  <div class="tile">
    Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2
    Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2Item 2
  </div> 
  <div class="tile">
    Item NItem NItem NItem NItem NItem NItem N
  </div> 
</div>

 

CSSはこのように指定します。”background-color”はお好みです。

.waterfall > div > div{
  background: #ccc;
  margin:0 7px 7px 0;
  padding: 15px;
  box-shadow: 0 1px 5px -1px rgba(170, 180, 190, 1); 
  border-radius: 10px;
}

 

JavaScriptなのですが、実装しなくても作れてしまいました。ただ外部ファイルは読み込む必要があります。すいません、あまり調査しきれていません。。。

するとこのように作ることが出来ました。画像いれたらそれっぽくなりそうですね。

screenshot341

 

Pinterestはどうなのでしょうか。私はあまり話題を聞かなくなってきているのですが、やはり人気のサービスなのでしょうね。ぜひ参考にどうぞ。

 

Home > JavaScript > Pinterest風なグリッドレイアウトを簡単に実装する「jQuery.waterfall」

Return to page top