运用流体布局的html代码,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可以在图片加载完成之后执行内部的代码。