圖片瀑布流佈局
阿新 • • 發佈:2018-12-13
具體效果如下圖
html如下圖所示
<div>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
css如下圖所示
*{
margin: 0;
padding: 0;
}
body{
/*float: left;*/
/*display: flex;*/
/*justify-content: center;*/
}
div {
width: 1200px;
margin: 0 auto;
}
ul{
float: left;
list-style: none;
width: 200px;
margin:0 20px;
}
js如下圖所示
window.onload=function () {
//先獲取所有的UL遍歷成陣列,設定usf為列印圖片的個數,設定bodyHeight為圖片到達停止的高度
let oUl=document.getElementsByTagName("ul");
let usf=0,bodyHeight=1000;
//從getPics中呼叫json為utp返回,並執行方法
myajax("get","getPics.php","cpage=1",function (utp) {
//將傳回的文字轉換成json
let json=JSON.parse(utp);
//遍歷整個json
for (tk in json){
//判斷瀏覽器所有內容高度小於設定的值,當超出時跳出迴圈
if (document.documentElement.scrollHeight<bodyHeight){
//新建一個li並新建一個img
let oLi=document.createElement("li");
let imgesP=document.createElement("img");
//給img賦值
imgesP.src=json[tk].image;
imgesP.style.width="200px";
//根據寬度更改高度
imgesP.style.height=(200/json[tk].width)*json[tk].height+"px";
imgesP.style.padding="5px 10px 5px 10px";
imgesP.style.backgroundColor="aqua";
imgesP.id=json[tk].id;
//獲取最短的ul的索引值
let jishu=memin(0,oUl);
//將img新增進li
oLi.appendChild(imgesP);
//將li新增進最短的ul
oUl[jishu].appendChild(oLi);
//統計圖片次數增加
usf++;
}else {
break;
}
}
});
//設定一個方法用於判斷,傳入陣列的最小值並返回
function memin(min,objkt) {
for (let i=1;i<objkt.length;i++){
if (objkt[min].offsetHeight>objkt[i].offsetHeight){
min=i;
}
}
return min;
}
//設定一個方法用於判斷,傳入陣列的最大值並返回
function memax(max,objkt){
for (let i=1;i<objkt.length;i++){
if (objkt[max].offsetHeight<objkt[i].offsetHeight){
max=i;
}
}
return max;
}
//判斷滾動條滾動事件
window.onscroll=function () {
//獲取瀏覽器滾動的高度和螢幕所佔高度
var bodySc=document.documentElement.scrollTop;
var bodyChe=document.documentElement.clientHeight;
//判斷滾動高度加螢幕高度如果大於設定的高度,進入判斷
if (bodyChe+bodySc>bodyHeight){
//給設定的高度增加500
bodyHeight+=500;
//呼叫ajax,返回json文字
myajax("get","getPics.php","cpage=1",function (utp) {
//將文字裝換為json
let json=JSON.parse(utp);
//設定while迴圈,當頁面所佔高度小於設定高度,迴圈
while (document.documentElement.scrollHeight<bodyHeight){
//判斷列印的圖片是否超出json所帶圖片個數,如果超出強制跳出迴圈
if (usf>=json.length)
break;
//建立一個li和一個img
let oLi=document.createElement("li");
let imgesP=document.createElement("img");
//給img賦值
imgesP.src=json[usf].image;
imgesP.style.width="200px";
//根據寬度,計算比例,算出高度的值並賦予
imgesP.style.height=(200/json[usf].width)*json[usf].height+"px";
imgesP.style.padding="5px 10px 5px 10px";
imgesP.style.backgroundColor="aqua";
imgesP.id=json[usf].id;
//獲取最短的ul的索引值
let jishu=memin(0,oUl);
//將img新增進li
oLi.appendChild(imgesP);
//將li新增進最短的ul
oUl[jishu].appendChild(oLi);
//記錄新增圖片的總數加一
usf++;
}
//判斷usf是否大於json傳入
if (usf==json.length){
//建立一個新的p標籤
let p=document.createElement("p");
//給新建的p賦值
p.innerText="後面沒有了哦";
p.style.width="1200px";
p.style.height="50px";
p.style.textAlign="center";
//獲取ul中高度最大ul的索引值
let jishu=memax(0,oUl);
//給p新增內邊距,使其在最底部
p.style.paddingTop=oUl[jishu].offsetHeight+50+"px";
//給最外層的div新增這個p
document.getElementsByTagName("div")[0].appendChild(p);
//給usf加一,使這個判斷不在被執行,反正反覆新增
usf++;
}
});
}
}
}