瀑布流佈局
瀑布流佈局 - 浮動
<div id="box"><ul><li><img src="../img/p-1.jpg" alt=""><p>浮動瀑布流佈局1</p></li><li><img src="../img/p-2.jpg" alt=""><p>浮動瀑布流佈局2</p></li><li><img src="../img/p-3.jpg" alt=""><p>浮動瀑布流佈局3</p></li></ul><ul><li><img src="../img/p-4.jpg" alt=""><p>浮動瀑布流佈局4</p></li><li><img src="../img/p-5.jpg" alt=""><p>浮動瀑布流佈局5</p></li><li><img src="../img/p-6.jpg" alt=""><p>浮動瀑布流佈局6</p></li></ul><ul><li><img src="../img/p-7.jpg" alt=""><p>浮動瀑布流佈局7</p></li><li><img src="../img/p-8.jpg" alt=""><p>浮動瀑布流佈局8</p></li><li><img src="../img/p-9.jpg" alt=""></li></ul></div>window.onload = function () {
var ul = document.getElementsByTagName('ul')
window.onscroll = function () {
var veiwHeight = document.documentElement.clientHeight; //可視區的距離
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滾動條滾動的距離
var bBtn = true //判斷是否需要加ajax
//開始循環： 所有ul，找裏面對應最後一個Li,與屏蔽上面進行比較
for (var i = 0; i < ul.length; i++) {
var li = ul[i].getElementsByTagName('li');
var lastli = li[li.length - 1] //找最後一個即可
if (posTop(lastli) < veiwHeight + scrollY && bBtn) { //必須發送請求加載
bBtn = false
ajax('data.js', function (str) { //xxx.php?page=1&num=10 //ajax(請求的地址，請求成功回調)
var json = eval('(' + str + ')') //返回字符串，解析成js語句，用eval 兩邊加小括號
if (json.code) { //json.code == 0 不發請求
bBtn = true; //無請求數據時為false
}
for (var i = 0; i < json.list.length; i++) { //三組數據添加到頁面，循環json裏的list == 9
var list = json.list[i];
for (var j = 0; j < list.src.length; j++) {
var li = document.createElement('li')
li.innerHTML = '<img src="' + list.src[j] + '"/><p>' + list.title[j] + '</p>'
ul[i].appendChild(li)
}
}
})
}
}
};
//觸發滾動條事件，每一個ul裏的li提前到達可視區，則分別添加數據；，先寫方法獲取距離下面的距離 ，offsetTop沒辦法直接獲取屏幕的距離，offsetTop是獲取到有定位的距離；
function posTop(obj) { //最後一個li頂部距離瀏覽器上邊的距離
var top = 0;
while (obj) {
top += obj.offsetTop;
obj = obj.offsetParent;
}
return top;
}
}瀑布流佈局 - 定位
<div id="box"><ul><li><img src="p-1.jpg" alt=""><p>浮動瀑布流佈局1</p></li><li><img src="p-2.jpg" alt=""><p>浮動瀑布流佈局2</p></li><li><img src="p-3.jpg" alt=""><p>浮動瀑布流佈局3</p></li><li><img src="p-4.jpg" alt=""><p>浮動瀑布流佈局4</p></li><li><img src="p-5.jpg" alt=""><p>浮動瀑布流佈局5</p></li><li><img src="p-6.jpg" alt=""><p>浮動瀑布流佈局6</p></li><li><img src="p-7.jpg" alt=""><p>浮動瀑布流佈局7</p></li><li><img src="p-8.jpg" alt=""><p>浮動瀑布流佈局8</p></li><li><img src="p-9.jpg" alt=""><p>浮動瀑布流佈局9</p></li></ul></div> window.onload = function () {
var li = document.getElementsByTagName('li');
var aHeight = {L: [], C: [], R: []};//存高度對象
for (var i = 0; i < li.length; i++) {
var iNow = i % 3// 0,1,2
switch (iNow) {
case 0:
li[i].style.left = '5px'
aHeight.L.push(li[i].offsetHeight)
var step = Math.floor(i / 3) //向下取整 0/3 1/3 2/3
if (!step) { //前三個
li[i].style.top = 0;
}
else { // 4/3 5/3....下面的每個累加
var sum = 0;//累加變量
for (var j = 0; j < step; j++) {
sum += aHeight.L[j] + 10
}
li[i].style.top = sum + 'px';
}
break;
case 1:
li[i].style.left = '200px'
aHeight.C.push(li[i].offsetHeight)
var step = Math.floor(i / 3) //向下取整 0/3 1/3 2/3
if (!step) { //前三個
li[i].style.top = 0;
}
else { // 4/3 5/3....下面的每個累加
/*
* 1，2，3關三個Li top值為0
* 後面li top值為前面累加，如 3 4 5 3/3 = 1, 4/3 = 1 , 5/3 =1 向下取整 即前面有一個元素的高度
* 6 7 8 Math.floor(i/3) = 2,即有兩個元素高度
* */
var sum = 0;//累加變量
for (var j = 0; j < step; j++) {
sum += aHeight.C[j] + 10
}
li[i].style.top = sum + 'px';
}
break;
case 2:
li[i].style.left = '400px'
aHeight.R.push(li[i].offsetHeight)
var step = Math.floor(i / 3) //向下取整 0/3 1/3 2/3
if (!step) { //前三個
li[i].style.top = 0;
}
else { // 4/3 5/3....下面的每個累加
var sum = 0;//累加變量
for (var j = 0; j < step; j++) {
sum += aHeight.R[j] + 10
}
li[i].style.top = sum + 'px';
}
break;
}
}
}