最少代码的瀑布流实现

最少代码的瀑布流实现

先看效果图吧：

JS代码先放上来给大家看下思路。具体实现还是需要css和html代码的，可以看我的在线源代码和效果：

全屏， chrome， 浏览最佳

http://runjs.cn/detail/j9qlhajc

$( function  (){
      $( '#brand-waterfall' ).waterfall();
});

  //   瀑布流插件  
//   pannysp 2013.4.9 
;( function   ($) {
    $.fn.waterfall  =  function  (options) {
          var  df =  {
            item:  '.item' ,
            margin:  15 ,
            addfooter:   true  
        };
        options  =  $.extend(df, options);
          return   this .each( function  () {
              var  $box = $( this ), pos =  [],
            _box_width  =  $box.width(),
            $items  =  $box.find(options.item),
            _owidth  = $items.eq(0).outerWidth() +  options.margin,
            _oheight  = $items.eq(0).outerHeight() +  options.margin,
            _num  = Math.floor(_box_width/_owidth);
 
            (  function  () {
                  var  i = 0 ;
                  for  (; i < _num; i++ ) {
                    pos.push([i *_owidth,0 ]);
                } 
            })();

            $items.each(  function  () {
                  var  _this = $( this  ),
                _temp  = 0 ,
                _height  = _this.outerHeight() +  options.margin;

                _this.hover(  function  () {
                    _this.addClass( 'hover' );
                },  function  () {
                    _this.removeClass( 'hover' );
                });

                  for  ( var  j = 0; j < _num; j++ ) {
                      if (pos[j][1] < pos[_temp][1 ]){
                          //  暂存top值最小那列的index 
                        _temp =  j;
                    }
                }
                  this .style.cssText = 'left:'+pos[_temp][0]+'px; top:'+pos[_temp][1]+'px;' ;
                  //  插入后，更新下该列的top值 
                pos[_temp][1] = pos[_temp][1] +  _height;
            });

              //   计算top值最大的赋给外围div 
            ( function  () {
                  var  i = 0, tops =  [];
                  for  (; i < _num; i++ ) {
                    tops.push(pos[i][ 1 ]);
                }
                tops.sort(  function  (a,b) {
                      return  a- b;
                });
                $box.height(tops[_num -1 ]);

                  //  增加尾部填充div 
                 if  (options.addfooter){
                    addfooter(tops[_num -1 ]);
                }
            })();

              function   addfooter(max) {
                  var  addfooter = document.createElement('div' );
                addfooter.className  = 'item additem' ;
                  for  ( var  i = 0; i < _num; i++ ) {
                      if (max != pos[i][1 ]){
                          var  clone =  addfooter.cloneNode(),
                        _height  = max - pos[i][1] -  options.margin;
                        clone.style.cssText  = 'left:'+pos[i][0]+'px; top:'+pos[i][1]+'px; height:'+_height+'px;' ;
                        $box[ 0 ].appendChild(clone);
                    }
                }
            }
        });
    }
})(jQuery); 

 

 

分类:  javascript ,  jquery

标签:  jquery ,  瀑布流 ,  js

作者： Leo_wl

　　　　

出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于最少代码的瀑布流实现的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did46285