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