简单瀑布流

老是有一些老同事跟我说，我想做个瀑布流怎么做，我说网上有组件啊，回答总是说我不需要用异步接口，我只需要把我静态demo转成瀑布流样式就可以了，我就简单做了一个，我把JS放到load 事件里主要是怕图片宽高不确定的情况下用。

 

$(window).on("load",function(){

     var waterfalls ={

           init:function(){

               var self = this;

               self.cfg={

                    colu:4//这里定义4列可以自己配置

                    tArry:[],//每一列的最后一个的top值

                    lArry[],//每一列的left值

                           node:".item",//节点样式

                           width:235,//列宽

                            space:15//间距

               };

              self. _initArray()//初始化数组

              self._render();//渲染瀑布流

           },

          /**

          *初始化数组

          */

          _initArray:function(){

               var self = this;

               for(var i=0;i<l=self.cfg.colu;i++){

                    self.cfg.tArray.push(0)    ;

                    self.cfg.lArray.push(i*(self.cfg.width+self.cfg.space));

                }

          },

           /**

          *得到最小高度列

          */

         _getMin:function(){

                var self = this,minTop =self.cfg.tArray[0],minIndex= 0;

                 for(var i=0;i<l=self.cfg.colu;i++){

                    if(self.cfg.tArray[i]<minTop){

                        minTop = self.cfg.tArray[i];

                         minIndex = i;

                   };

                };

               return minIndex;

          },

         /**

          *渲染瀑布流

          */

        _render:function(){

              var self = this;

              $(self.cfg.item).each(function(item){

                   var min = self._getMin();

                   $(item).css({

                        top:self.cfg.tArray[min],

                        left:self.cfg.lArray[min]

                    });

                   self.cfg.tArray[min] += $(item).height()+15;  

             })

        }

     };

    waterfalls.init();

});