简易版瀑布流

简易版的原理

取出data下的一条box数据。判断四个li容器谁最短,把刚取出的数据放进去,以此类推。

<div class="content">
  <ul>
    <li><li>
    <li><li>
    <li><li>
    <li><li>
  </ul>
</div>
<div class="data hide">
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x300/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x400/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x500/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x600/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
</div>

在线查看

评论

发表回复