一个简单的图片瀑布流
首先准备一个html文件,css用到很少,所以写在html里,还需要一个js文件及几张图片(分辨率随意)
html的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
position: relative;
}
.box_img {
padding: 5px;
float: left;
}
.box_img img {
width: 300px;
height: auto;
}
</style>
<script src="js/test.js">
</script>
</head>
<body>
<div id="container">
<div class="box_img">
<img src="1.jpg">
</div>
<div class="box_img">
<img src="2.jpg">
</div>
<div class="box_img">
<img src="3.jpg">
</div>
<div class="box_img">
<img src="4.jpg">
</div>
<div class="box_img">
<img src="5.jpg">
</div>
<div class="box_img">
<img src="6.jpg">
</div>
<div class="box_img">
<img src="7.jpg">
</div>
<div class="box_img">
<img src="8.jpg">
</div>
<div class="box_img">
<img src="9.jpg">
</div>
<div class="box_img">
<img src="5.jpg">
</div>
<div class="box_img">
<img src="6.jpg">
</div>
<div class="box_img">
<img src="7.jpg">
</div>
<div class="box_img">
<img src="8.jpg">
</div>
<div class="box_img">
<img src="9.jpg">
</div>
</div>
</body>
</html>
可以看出id为container的div包裹了许多class为box_img的div,而这些div中都包含有一张图片, 但是这样仅仅是图片的堆砌,每行图片之间有很大的留白,这时加入js后即可以实现瀑布流的效果
js的代码:
1 /**
2 * Created by earthgee on 2015/4/3.
3 */
4 window.onload=function(){
5 imgLocation("container","box_img");
6
7 var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
8
9 window.onscroll= function () {
10 if(checkflag()){
11 //动态增加图片,实现自动加载
12 var cparent=document.getElementById("container");
13 for(var i=0;i<imgData.data.length;i++)
14 {
15 var ccontent=document.createElement("div");
16 ccontent.className="box_img";
17 cparent.appendChild(ccontent);
18 var img=document.createElement("img");
19 img.src=imgData.data[i].src;
20 ccontent.appendChild(img);
21 }
22 imgLocation("container","box_img");
23 }
24 }
25 }
26
27 //此函数实现自动加载,通过检查当前页面最后一张图片距离顶端的距离,然后和页面高度及滚动距离作比较
28 function checkflag()
29 {
30 var cparent=document.getElementById("container");
31 var cconent=getChildElement(cparent,"box_img");
32 var lastContentHeight=cconent[cconent.length-1].offsetTop;
33 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
34 var pageHeight=document.documentElement.scrollTop||document.body.scrollTop;
35 if(lastContentHeight<scrollTop+pageHeight)
36 {
37 return true;
38 }
39 }
40
41 //此函数实现瀑布流
42 function imgLocation(parent,content) {
43 var cparent=document.getElementById(parent);
44 var ccontent=getChildElement(cparent,content); //ccontent为数组
45 var imgWidth=ccontent[0].offsetWidth; //获得第一张图片的宽度(因为后面要在css中设置每张图片的宽度相同)
46 var cols=Math.floor(document.documentElement.clientWidth/imgWidth); //一行放多少张图片
47 cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";
48
49 var boxHeightArr=[];
50 for(var i=0;i<ccontent.length;i++)
51 {
52 if(i<cols) //boxHeightArr存放第一行图片的宽度
53 {
54 boxHeightArr[i]=ccontent[i].offsetHeight;
55
56 }
57 else
58 {
59 var minheight=Math.min.apply(null,boxHeightArr);
60 var minIndex=getminheightLocation(boxHeightArr,minheight); //找到第一行最短图片的索引
61 ccontent[i].style.position="absolute";
62 ccontent[i].style.top=minheight+"px";
63 ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
64 boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccontent[i].offsetHeight; //将每一张图片放到当前可以找到的最短图片下面,并增加长度
65 }
66 }
67 }
68
69 function getminheightLocation(boxHeightArr,minHeight) {
70 for(var i in boxHeightArr){
71 if(boxHeightArr[i]==minHeight){
72 return i;
73 }
74 }
75 }
76
77
78 //获得parent的所有class为content的子元素,返回一个数组
79 function getChildElement(parent,content){
80 var contentArr=new Array();
81 var allcontent=parent.getElementsByTagName("*"); //匹配所有子元素
82 for(var i=0;i<allcontent.length;i++)
83 {
84 if(allcontent[i].className==content)
85 {
86 contentArr.push(allcontent[i]);
87 }
88 }
89 return contentArr;
90 }
此时就实现了图片瀑布流的效果,可以放在网站里了...
时间： 2024-10-04 04:25:22