2kb大小的瀑布流網格布局：minigrid

2kb大小的瀑布流網格布局：minigrid

示 例

 安裝

For node:

npm install minigrid

Or for the browser:

bower install minigrid

用法

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

var grid = require('minigrid');
grid('.grid', '.grid-item');

To avoid weird stuff to happen I'd suggest setposition: relativein your main container.

.grid { position: relative;
}

Then setposition: absoluteto your grid items.

.grid-item { position: absolute;
}

That's it!

API

minigrid(containerSelector, itemSelector, gutter, animate, done)

• containerSelector -string: required.
• itemSelector -string: required.
• gutter -number: gutter between items, default is6.
• animate -function: optional.
• done -function: optional. Called after the grid was updated.

animate

It returns a function with theelement,x,yandindexfor each grid item.

function animate(el, x, y, index) { // Use your favourite library for animate the element }
minigrid('.grid', '.grid-item', 6, animate);

項目主頁：http://www.baiduhome.net/lib/view/home/1438311844300