瀑布流現(xiàn)在基本上是圖片顯示網(wǎng)頁的標(biāo)配，主要是為了適配圖片和文字塊的大小，使顯示出的效果沒有那么呆板
實(shí)現(xiàn)這個(gè)功能首先要有html，css和js基礎(chǔ)
首先先實(shí)現(xiàn)瀑布流
即下一行的圖片放在上一行的凹下去的地方
基本的html代碼如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--script不能用<script/>-->
<script src="js/app1.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="img_box">
[站外圖片上傳中……(2)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(3)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(4)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(5)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(6)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(7)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(8)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(9)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(10)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(11)]
</div>
</div>
<div class="box">
<div class="img_box">
[站外圖片上傳中……(12)]
</div>
</div>
</div>
</body>
</html>
然后再寫一下css
*{
margin: 0px;
padding: 0px;
}
/*container為相對布局*/
#container{
position:relative;
}
/*box向左浮動*/
.box{
padding:5px;
float: left;
}
/*加一些邊框*/
.img_box{
padding: 5px;
border:1px solid #ccc;
box-shadow:0 0 5px #ccc;
border-radius: 5px;
}
/*寬度固定，高度自適應(yīng)，使圖片不變形*/
.img_box img{
width: 150px;
height: auto;
}
接下來就是這次的核心，寫js
//開始加載要執(zhí)行的方法
window.onload=function(){
imgLocation("container","box")
}
function imgLocation(parent,content){
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,content)
//圖片寬度
var imgWidth=ccontent[0].offsetWidth;
//每一行圖片個(gè)數(shù)
var cols= Math.floor(document.documentElement.clientWidth/imgWidth);
//使寬度一定，內(nèi)容居中
cparent.style.cssText="width:"+imgWidth *cols+"px;margin:0 auto";
var BoxHeightArr=[];
for(var i=0;i<ccontent.length;i++){
//獲取第一行圖片的高度
if (i<cols){
BoxHeightArr[i]=ccontent[i].offsetHeight;
}else {
//Math.min對數(shù)組要加上apply
var minheight=Math.min.apply(null,BoxHeightArr);
var minIndex=getminheightLocation(BoxHeightArr,minheight)
//設(shè)為絕對布局使內(nèi)容不隨屏幕大小改變
ccontent[i].style.position="absolute";
ccontent[i].style.top=minheight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
//該列的高度加上后添加進(jìn)去圖片高度
BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight
}
}
}
//獲取最小高度的位置
function getminheightLocation(BoxHeightArr,minHeight){
for(var i in BoxHeightArr){
if (BoxHeightArr[i]==minHeight){
return i;
}
}
}
function getChildElement(parent,content){
var contentArr=[];
//獲取所有子Element
var allcontent=parent.getElementsByTagName("*")
for(var i=0;i<allcontent.length;i++){
//如果className是box就添加進(jìn)去
if (allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr
}
這樣就簡單實(shí)現(xiàn)了瀑布流效果
接下來是下拉到底部自動刷新
主要是在滾動時(shí)監(jiān)聽是否到底部，到達(dá)差不多底部的位置就加載
添加以下代碼即可
window.onscroll=function(){
//模擬數(shù)據(jù)
var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
if (checkFlag()){
var cparent=document.getElementById("container");
for(var i =0;i<imgData.data.length;i++){
var ccontent=document.createElement("div");
ccontent.className="box";
cparent.appendChild(ccontent);
var boximg=document.createElement("div");
boximg.className="img_box";
ccontent.appendChild(boximg);
var img=document.createElement("img");
img.src="images/"+imgData.data[i].src;
boximg.appendChild(img);
}
//按照之前規(guī)則排列
imgLocation("container","box")
}
}
function checkFlag(){
var cparent=document.getElementById("container");
var ccontent=getChildElement(cparent,"box");
//最后一張圖片距離頂部距離
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
//當(dāng)前距離
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//該頁面顯示的高度
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
//如果差不多到達(dá)底部則返回true
if (lastContentHeight<scrollTop+pageHeight){
return true;
}
}
效果圖如下
效果圖
