本篇内容实现类似百度图片的呈现功能，瀑布流+自动加载
index13.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>uvi</title> 6 <link rel="stylesheet" href="style2.css" type="text/css"> 7 <script src="myjs.js"></script> 8 </head> 9 <body> 10 <div id="container"> 11 <div class="box"> 12 <div class="box_img"> 13 <img src="img.jpg"> 14 </div> 15 </div> 16 <div class="box"> 17 <div class="box_img"> 18 <img src="img2.jpg"> 19 </div> 20 </div> 21 <div class="box"> 22 <div class="box_img"> 23 <img src="img3.jpg"> 24 </div> 25 </div> 26 <div class="box"> 27 <div class="box_img"> 28 <img src="img4.jpg"> 29 </div> 30 </div> 31 <div class="box"> 32 <div class="box_img"> 33 <img src="img5.jpg"> 34 </div> 35 </div> 36 <div class="box"> 37 <div class="box_img"> 38 <img src="img6.jpg"> 39 </div> 40 </div> 41 <div class="box"> 42 <div class="box_img"> 43 <img src="img7.jpg"> 44 </div> 45 </div> 46 <div class="box"> 47 <div class="box_img"> 48 <img src="img8.jpg"> 49 </div> 50 </div> 51 <div class="box"> 52 <div class="box_img"> 53 <img src="img9.jpg"> 54 </div> 55 </div> 56 <div class="box"> 57 <div class="box_img"> 58 <img src="img3.jpg"> 59 </div> 60 </div> 61 <div class="box"> 62 <div class="box_img"> 63 <img src="img4.jpg"> 64 </div> 65 </div> 66 <div class="box"> 67 <div class="box_img"> 68 <img src="img5.jpg"> 69 </div> 70 </div> 71 <div class="box"> 72 <div class="box_img"> 73 <img src="img6.jpg"> 74 </div> 75 </div> 76 <div class="box"> 77 <div class="box_img"> 78 <img src="img7.jpg"> 79 </div> 80 </div> 81 <div class="box"> 82 <div class="box_img"> 83 <img src="img8.jpg"> 84 </div> 85 </div> 86 <div class="box"> 87 <div class="box_img"> 88 <img src="img9.jpg"> 89 </div> 90 </div> 91 <div class="box"> 92 <div class="box_img"> 93 <img src="img3.jpg"> 94 </div> 95 </div> 96 <div class="box"> 97 <div class="box_img"> 98 <img src="img4.jpg"> 99 </div> 100 </div> 101 <div class="box"> 102 <div class="box_img"> 103 <img src="img5.jpg"> 104 </div> 105 </div> 106 <div class="box"> 107 <div class="box_img"> 108 <img src="img6.jpg"> 109 </div> 110 </div> 111 <div class="box"> 112 <div class="box_img"> 113 <img src="img7.jpg"> 114 </div> 115 </div> 116 <div class="box"> 117 <div class="box_img"> 118 <img src="img8.jpg"> 119 </div> 120 </div> 121 <div class="box"> 122 <div class="box_img"> 123 <img src="img9.jpg"> 124 </div> 125 </div> 126 127 128 </div> 129 </div> 130 131 </body> 132 </html>
css代码:
1 *{
2 margin:0px;
3 padding:0px;
4 }
5 #container{
6 position:relative;
7
8 }
9 .box{
10 padding: 5px;
11 float: left;
12 }
13 .box_img{
14 padding:5px;
15 border:1px solid #cccccc;
16 box-shadow:0 0 5px #cccccc;
17 border-radius:5px;
18 }
19 .box_img img{
20 width:1000px;
21 height:auto;
22 }
js代码
1 window.onload = function(){
2 imgLocation("container","box");
3 var imgData={"data":[{"src":"img.jpg"},{"src":"img2.jpg"},{"src":"img3.jpg"}]};
4 window.onscroll = function(){//监听滚动条
5 if(checkFlag()){
6 var cparent = document.getElementById("container");
7 for(var i=0;i<imgData.data.length;i++){
8 var ccontent = document.createElement("div");
9 ccontent.className = "box";
10 cparent.appendChild(ccontent);
11 var boximg = document.createElement("div");
12 boximg.className = "box_img";
13 ccontent.appendChild(boximg);
14 var img = document.createElement("img");
15 img.src = imgData.data[i].src;
16 boximg.appendChild(img);
17 }
18 imgLocation("container","box");
19 }
20 }
21 }
22
23 function checkFlag(){
24 var cparent = document.getElementById("container");
25 var ccontent = getChildElement(cparent, "box");
26 var lastContentHeight = ccontent[ccontent.length-1].offsetTop;//获取最后一张照片距离顶部的高度
27 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
28 var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
29 if(lastContentHeight<scrollTop+pageHeight){
30 return true;
31 }
32
33 }
34
35 function imgLocation(parent,content){
36 //将parent下的所有content全部取出
37 var cparent = document.getElementById(parent);
38 var ccontent = getChildElement(cparent,content);
39 var imgWidth = ccontent[0].offsetWidth;
40 var num =Math.floor(document.documentElement.clientWidth/imgWidth);
41 cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0px auto";
42
43 var BoxHeightArr = [];
44 for(var i = 0;i<ccontent.length;i++){
45 if(i<num){
46 BoxHeightArr[i] = ccontent[i].offsetHeight;
47 }else{
48 var minHeight = Math.min.apply(null,BoxHeightArr);//获得最小高度
49 var minIndex = getminheightLocation(BoxHeightArr,minHeight);
50 ccontent[i].style.position = "absolute";
51 ccontent[i].style.top = minHeight+"px";
52 ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
53 BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
54 }
55 }
56 }
57
58 function getminheightLocation(BoxHeightArr,minHeight){
59 for(var i in BoxHeightArr){
60 if(BoxHeightArr[i]==minHeight){
61 return i;
62 }
63 }
64 }
65
66 function getChildElement(parent,content){
67 var contentArr = [];
68 var allcontent = parent.getElementsByTagName("*");
69 for(var i =0;i<allcontent.length;i++){
70 if(allcontent[i].className==content){
71 contentArr.push(allcontent[i]);
72 }
73 }
74 return contentArr;
75 }
时间： 2024-10-25 23:39:10