|
|
Posted on 2012-07-15 18:16 小胡子 閱讀(6405) 評論(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/
|