jquery 流体布局插件:Waterfall

流体布局（一）

jQuery插件:jQuery.Waterfall.js, js的计算方法

jQuery1.4.4,IE8.0,opera,firefox,chrome测试通过

围观请点击:http://3vke.com

下载地址:Waterfall on github

1.使用方法:

①.加载jQuery库;
②.加载jQuery.Waterfull.js , 必须在jQuery库之后;
③.调用接口: $node.waterfull({/* 此处为设置选项, 可留空 */}) , 如:

$('#container').waterfall({})

2.设置选项:

{
    itemSelector: ' .post-home ' ,    //  子元素id/class, 可留空
    columnCount: 4 ,                //  列数,  纯数字, 可留空
    columnWidth: 300                //  列宽度, 纯数字, 可留空
    isResizable:  false ,           //  自适应浏览器宽度, 默认false
    isAnimated:  false ,            //  元素动画, 默认false
    Duration:  500 ,                //  动画时间
    Easing:  " swing " ,              //  动画效果, 配合 jQuery Easing Plugin 使用
    endFn: function(){}           //  回调函数
}

3.Ajax说明:

$.ajax({
    url: Url,
    beforeSend: function() {},
    success: function(date) {
        $( ' #container ' ).append(date).waterfall({});
    }
})

流体布局（二）

固定宽度的流体布局的个人思路：参考文献：@qiqiboy javascript 图片预加载 

思路如下：

1.imgReady可以在图片没有加载完成之前，通过头信息获取到图片的大小（这种方法相当天才），于是我建立一个局部的数组，将图片高度储存起来:（div的高度亦可）

var argg= new Array()//例如有10篇文章，就是一个length=10的数组

2.通过浏览器的宽度，来判断一行可以放几张图（假定3张），再建立一个全局数组，保存数据：

var args= new Array()//初始化数据，全部设定为0 args=[0,0,0];

3.排序，用for循环，每一次通过比较argg[i]和args的最小值，来确定下一个div放置的位置，放完之后，把args的最小值重新赋值：

args[min]+=argg[i]

新版iphoto主题，采用如上方法布局，包含ajax后只有8Kb，相当廉价，新版首页观光地址：http://icold.me/photo

1.流体布局主题iPhoto新版首页观光地址：http://icold.me/photo

2.流体布局js计算方法以及js源代码下载:流体布局（三） 

 

 

流体布局（三）

本文主要写固定宽度流体布局中的处理办法（全文以iphoto主题为例）

1.先看看Html结构

< div id = " container " >
     < div  class = " post-home " > xxoo.. </ div >
     < div  class = " post-home " > xxoo.. </ div >
     < div  class = " post-home " > xxoo.. </ div >
     < div  class = " post-home " > xxoo.. </ div >
     < div  class = " post-home " > xxoo.. </ div >
    
</ div >

#container宽度我设定为1050px, .post-home宽度设定为350px,具体的css就不写了（也就是3列）

2.js的算法

jQuery(document).ready(function($) {
  var args  =  [ 0 ,  0 ,  0 ];
   /* 储存已排列的最后3个.post-home的top值, 初始时为[0,0,0];
    没有储存left值, 因为left已经是知道的, [0,350,700];
   */
  sort($( ' #container > .post-home ' ));
  function sort(elem) {  //  elem是传入的DOM
    var r,  //  setTimeout相关变量
        m  =   0 , //  初始变量
        n  =  elem.length, //  .post-home的数量
        topArgs  =   new  Array();  //  建立一个局部数组
    Array.prototype.min  =  function() {
       /* 返回数组中最小值的序号
     0 ==>第一列（left = 0*350px）
     1 ==>第二列（left = 1*350px）
     2 ==>第三列（left = 2*350px）
       */
      var e,d  =   0 ,b  =   this [ 0 ],c  =   this .length;
       for  (e  =   1 ; e  <  c; e ++ ) {
         if  ( this [e]  <  b) {b  =   this [e];d  =  e}
      }
       return  d
    };
    Array.prototype.max  =  function() {  //  返回数组中的最大值
      var d, b  =   this [ 0 ],c  =   this .length;
       for  (d  =   1 ; d  <  c; d ++ ) {
         if  ( this [d]  >  b) {b  =   this [d]}
      }
       return  b
    };
    getHeight();
    function getHeight() {
       if  (m  <  n) {  //  用来判断是不是获取了所有的.post-home的高度
        var $ this   =  elem.eq(m),  //  第m个.post-home
            h  =  parseInt($ this .height())  +   16 ;  //  第m个.post-home高度 + 16, 16是与下一个div的距高
        topArgs.push(h);  //  把第m个.post-home高度, 放到数组中去
        m ++ ;  //  m累加
        r  =  setTimeout(getHeight,  10 )  //  setTimeout来循环函数, 直到m==n 获取所有的高度
      }
       if  (m  >=  n) {
        clearTimeout(r);  //  清除循环
        r  =   null ;
        var d, e  =  topArgs.length;  // 初始化数据
         for  (d  =   0 ; d  <  e; d ++ ) {  //  for循环来给topleft赋值
          var minNum  =  args.min(),  //  获得args的最小值的序号
              newTop  =  args[minNum], //  获得args的最小值
          $that  =  elem.eq(d);  //  第d个.post-home
          $that.css({  //  for循环来给topleft赋值
            position:  " absolute " ,
            top: newTop,
            left:  350   *  minNumber
          });
          args[minNum]  =  newTop  +  topArgs[d];
           /* 改变args数组最小值的大小
       这样args[minNum]就不是最小了
       而是这一列下一个.post-home的高度
       如此循环，下一个args[minNum]，就是第二列的下一个.post-home的高度
      */
        }
        $( ' #container ' ).css({
          height: args.max()  // 给$('#container')的高度赋值
        });
      }
    }
  }
});

3.最重要的问题

假如不能及时得到img的高度，将会错位，所以这里推荐再谈javascript图片预加载技术, 如果你嫌麻烦，可以用$(window).load(function(){})把上面的代码包括起来，$(window).load可以在图片加载完成之后执行内部的代码。

http://3vke.com/2012/03/09/%E6%B5%81%E4%BD%93%E5%B8%83%E5%B1%80%E6%8F%92%E4%BB%B6waterfall/