简单js瀑布流效果

以thinkphp为例
css

     <style type="text/css">
            .demo {
                position: relative;
                opacity: 0;
                transition: .2s ease;
                margin-bottom: 60px;margin:0 -15px;
            }
            .grid {
                position: relative;
                /* fluffy */
                margin: 0 auto;
                width: 100%;
                /* end fluffy */
            }
            .grid-item {
                position: absolute;
                top: 0;
                left: 0px;
                /* fluffy */
                width: 575px;
                height:auto;padding-top:5px;padding-left:5px;
             border:1px solid #eee;        
                /* end fluffy */
                -webkit-transition: .2s ease-in-out;
                -o-transition: .2s ease-in-out;
                transition: .2s ease-in-out;
            }
            @media (max-width: 600px) {
                .grid-item {
                    width: 100%;   
                }
            }
        </style>

模板

	  <div class="demo">
	   <ul class="grid ">
          <volist name="list" id="v" key="k1">
            <li class="grid-item">
			  <div class="col-sm-2 col-xs-6 "style="padding:0;padding-right:10px">
                	<a style="display:block;position:relative;"href="{:C('MULU')}?a=cp2&id={$v.id}">
			<img title="{$v.name}"class=".img-re-w"width="100%" src="{$v.pic2}" alt="{$v.name}"/></a>
              </div>  
              <div class="col-sm-10 col-xs-12"style="padding:0;padding-right:5px">
                 <h4 style="font-weight:700;word-break:break-all;font-size:15px;;line-height:22px;">
				 <a style="color:#3cbfae;"title="{$v.name}" href="{:C('MULU')}?a=cp2&id={$v.id}">{:msubstr2($v['name'],58,'')}</a></h4>
				    {$v.zifenlei}	
				 <br/><br/>
			</div> 
            </li>

            </volist>
          <br/>
	  </ul>
	  </div>

js代码

	<script type="text/javascript">
(function(exports){
  function minigrid(containerSelector, itemSelector, gutter, animate, done) {
    var forEach = Array.prototype.forEach;
    var containerEle = document.querySelector(containerSelector);
    var itemsNodeList = document.querySelectorAll(itemSelector);
    gutter = gutter || 6;
    containerEle.style.width = '';
    var containerWidth = containerEle.getBoundingClientRect().width;
    var firstChildWidth = itemsNodeList[0].getBoundingClientRect().width + gutter;
    var cols = Math.max(Math.floor((containerWidth - gutter) / firstChildWidth), 1);
    var count = 0;
    containerWidth = (firstChildWidth * cols + gutter) + 'px';
    containerEle.style.width = containerWidth;
    
    for (var itemsGutter = [], itemsPosX = [], g = 0; g < cols; g++) {
      itemsPosX.push(g * firstChildWidth + gutter);
      itemsGutter.push(gutter);
    }

    forEach.call(itemsNodeList, function(item){
      var itemIndex = itemsGutter.slice(0).sort(function (a, b) {
        return a - b;
      }).shift();
      itemIndex = itemsGutter.indexOf(itemIndex);
      var posX = itemsPosX[itemIndex];
      var posY = itemsGutter[itemIndex];
      var transformProps = [
        'webkitTransform', 
        'MozTransform', 
        'msTransform',
        'OTransform', 
        'transform'
      ];
      if (!animate) {
        forEach.call(transformProps, function(transform){
          item.style[transform] = 'translate(' + posX + 'px,' + posY + 'px)';
        });  
      }
      itemsGutter[itemIndex] += item.getBoundingClientRect().height + gutter;
      count = count + 1;
      if (animate) {
        return animate(item, posX, posY, count);
      }
    });
    var containerHeight = itemsGutter.slice(0).sort(function (a, b) {
      return a - b;
    }).pop();

    containerEle.style.height = containerHeight + 'px';

    if (typeof done === 'function'){
      done();
    }
  }
  if (typeof define === 'function' && define.amd) {
    define(function() { return minigrid; });
  } else if (typeof module !== 'undefined' && module.exports) {
    module.exports = minigrid;
  } else {
    exports.minigrid = minigrid;
  }
})(this);
  (function() {
            minigrid('.grid', '.grid-item', 16, null,
            //16表示各模块间的距离px
                    function() {
                        var d = document.querySelector('.demo');
                        d.style.opacity = 1;
                    }
            );
            window.addEventListener('resize', function() {
                minigrid('.grid', '.grid-item');
            });
        })();
</script>

演示地址:http://www.microphotons.cn/?a=cp1&id=10
效果图