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

dgbm 9年前

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.open-open.com/lib/view/home/1438311844300