|
|
Posted on 2012-07-15 18:16 小胡子 阅读(6392) 评论(0) 编辑 收藏 所属分类: JQuery
流体布局（一） 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的最小值重新赋值： 新版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/
|