测试摘要1

瀑布流概念

• 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个区块总是放在总高度最短的那一列的下面。

 

• html代码块

1 2 3 4 5 6

<ul id="pics"> <li></li> <li></li> <li></li> <li></li> </ul>

• css代码块

1 2 3 4 5

*{margin:0;padding:0}; #pics{list-style: none;margin: 30px auto;width: 1080px;} #pics li{float: left;width: 250px;margin: 10px;} #pics li div{width: 210px;padding: 10px;border: 1px solid gray;margin-bottom: 20px;} #pics li div img{width: 200px;}

• js代码块

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

  //运用ajax获取图片地址 //获取页面元素(组件/控件) let lis=document.getElementById("pics").getElementsByTagName("li"); //接收服务器数据 function fn(data){ //遍历所有数据 for(let i in data){ let oDiv=document.createElement("div"); let oImg=document.createElement("img"); let oP=document.createElement("p"); //将接收的数据放到页面组件中 oImg.src=data[i].preview; //缩略图 oP.innerHTML=data[i].title; //标题 //将oImg和oP放到oDiv中 oDiv.appendChild(oImg); oDiv.appendChild(oP); //按一定的规律将图片放入到li中 switch(i%4){ case 0: lis[0].appendChild(oDiv); break; case 1: lis[1].appendChild(oDiv); break; case 2: lis[2].appendChild(oDiv); break; case 3: lis[3].appendChild(oDiv); break; default: lis[0].appendChild(oDiv); break; } } } //pageIndex表示页码 let pageIndex=1; let JSONP=document.creatElement("script"); JSONP.type='text/javaScript'; //src表示地址 fn表示回调函数 JSONP.src="http://www.wookmark.com/api/json/popular?page='+pageIndex+'&callback=fn"; document.body.appendChild(JSONP);

• 这种方式实现的效果是每个列的元素内的图片数量是一致的，如果某一列高度图片过高，那么就会出现最后的效果是参差不齐的。如果在加载下一页，效果就会更加不好，会存在一个又一个的窟窿，这显然是和我们想要的效果是不一致的。那样这就需要我们队代码进行一定的更改。
  代码如下：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

  //获取页面元素(组件/控件) let lis=document.getElementById("pics").getElementsByTagName("li"); //pageIndex表示页码 let pageIndex=1; let isLoaded=false; loadData();//加载数据 //滚动事件 window.onscroll=function(){ var index=getMinHeight();//最短列的索引 // console.log(document.documentElement.scrollTop);//滚动距离 //滚动高度 var h1=document.documentElement.scrollTop; var h2=document.documentElement.clientHeight;//视口高度 var h3=lis[index].offsetHeight;//最短列高度 if(h1+h2>h3){ //加载下一页 pageIndex++; if(isLoaded){ loadData(); } } }; //接收服务器数据 function fn(data){ //遍历所有数据 for(let i in data){ let oDiv=document.createElement("div"); let oImg=document.createElement("img"); let oP=document.createElement("p"); //将接收的数据放到页面组件中 oImg.src=data[i].preview; //缩略图preview表图片路径 oP.innerHTML=data[i].title; //标题title表图片标题 //将oImg和oP放到oDiv中 oDiv.appendChild(oImg); oDiv.appendChild(oP); //设置div预留高度 var oH=(data[i].height/data[i].width)*220+80+'px'; oDiv.style.height=oH; oDiv.appendChild(oImg); oDiv.appendChild(oP); //计算 上一次存放后，所有列中最短列 //将图片放置在最短的列中 var index=getMinHeight(); lis[index].appendChild(oDiv); } isLoaded=true;//加载完毕 }; //获取最短列 function getMinHeight(){ let minIndex=0; //假设第一列最短 最短列索引 //取出最短列的高度 let mHieght=lis[minIndex].offsetHeight; for(let i=0;i<lis.length;i++){ if(lis[i].offsetHeight<mHieght){ mHieght=lis[i].offsetHeight; //将高度短的列的高度保存起来 minIndex=i; //将短的列的索引保存起来 } } return minIndex; }; function loadData(){ isLoaded=false;//正在加载 let JSONP=document.creatElement("script"); JSONP.type='text/javaScript'; //src表示地址大家可以自行添加 fn表示回调函数 JSONP.src="http://----?page='+pageIndex+'&callback=fn"; document.body.appendChild(JSONP); }

• 最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，是用于帮助大家理解瀑布流布局的，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

赏

谢谢你请我吃糖果

瀑布流概念

• 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个区块总是放在总高度最短的那一列的下面。

实现

• html代码块

1 2 3 4 5 6

<ul id="pics"> <li></li> <li></li> <li></li> <li></li> </ul>

• css代码块

1 2 3 4 5

*{margin:0;padding:0}; #pics{list-style: none;margin: 30px auto;width: 1080px;} #pics li{float: left;width: 250px;margin: 10px;} #pics li div{width: 210px;padding: 10px;border: 1px solid gray;margin-bottom: 20px;} #pics li div img{width: 200px;}

• js代码块

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

  //运用ajax获取图片地址 //获取页面元素(组件/控件) let lis=document.getElementById("pics").getElementsByTagName("li"); //接收服务器数据 function fn(data){ //遍历所有数据 for(let i in data){ let oDiv=document.createElement("div"); let oImg=document.createElement("img"); let oP=document.createElement("p"); //将接收的数据放到页面组件中 oImg.src=data[i].preview; //缩略图 oP.innerHTML=data[i].title; //标题 //将oImg和oP放到oDiv中 oDiv.appendChild(oImg); oDiv.appendChild(oP); //按一定的规律将图片放入到li中 switch(i%4){ case 0: lis[0].appendChild(oDiv); break; case 1: lis[1].appendChild(oDiv); break; case 2: lis[2].appendChild(oDiv); break; case 3: lis[3].appendChild(oDiv); break; default: lis[0].appendChild(oDiv); break; } } } //pageIndex表示页码 let pageIndex=1; let JSONP=document.creatElement("script"); JSONP.type='text/javaScript'; //src表示地址 fn表示回调函数 JSONP.src="http://www.wookmark.com/api/json/popular?page='+pageIndex+'&callback=fn"; document.body.appendChild(JSONP);

• 这种方式实现的效果是每个列的元素内的图片数量是一致的，如果某一列高度图片过高，那么就会出现最后的效果是参差不齐的。如果在加载下一页，效果就会更加不好，会存在一个又一个的窟窿，这显然是和我们想要的效果是不一致的。那样这就需要我们队代码进行一定的更改。
  代码如下：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

  //获取页面元素(组件/控件) let lis=document.getElementById("pics").getElementsByTagName("li"); //pageIndex表示页码 let pageIndex=1; let isLoaded=false; loadData();//加载数据 //滚动事件 window.onscroll=function(){ var index=getMinHeight();//最短列的索引 // console.log(document.documentElement.scrollTop);//滚动距离 //滚动高度 var h1=document.documentElement.scrollTop; var h2=document.documentElement.clientHeight;//视口高度 var h3=lis[index].offsetHeight;//最短列高度 if(h1+h2>h3){ //加载下一页 pageIndex++; if(isLoaded){ loadData(); } } }; //接收服务器数据 function fn(data){ //遍历所有数据 for(let i in data){ let oDiv=document.createElement("div"); let oImg=document.createElement("img"); let oP=document.createElement("p"); //将接收的数据放到页面组件中 oImg.src=data[i].preview; //缩略图preview表图片路径 oP.innerHTML=data[i].title; //标题title表图片标题 //将oImg和oP放到oDiv中 oDiv.appendChild(oImg); oDiv.appendChild(oP); //设置div预留高度 var oH=(data[i].height/data[i].width)*220+80+'px'; oDiv.style.height=oH; oDiv.appendChild(oImg); oDiv.appendChild(oP); //计算 上一次存放后，所有列中最短列 //将图片放置在最短的列中 var index=getMinHeight(); lis[index].appendChild(oDiv); } isLoaded=true;//加载完毕 }; //获取最短列 function getMinHeight(){ let minIndex=0; //假设第一列最短 最短列索引 //取出最短列的高度 let mHieght=lis[minIndex].offsetHeight; for(let i=0;i<lis.length;i++){ if(lis[i].offsetHeight<mHieght){ mHieght=lis[i].offsetHeight; //将高度短的列的高度保存起来 minIndex=i; //将短的列的索引保存起来 } } return minIndex; }; function loadData(){ isLoaded=false;//正在加载 let JSONP=document.creatElement("script"); JSONP.type='text/javaScript'; //src表示地址大家可以自行添加 fn表示回调函数 JSONP.src="http://----?page='+pageIndex+'&callback=fn"; document.body.appendChild(JSONP); }

• 最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，是用于帮助大家理解瀑布流布局的，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

赏

谢谢你请我吃糖果