滝の流れの配置--原生JavaScript
46502 ワード
HTML(小包関係に注意し、Js呼び出しに便利)
(関数に瑕疵があります.理解を学ぶためにのみ使用します.)
1 <body>
2 <div id="main">
3 <div class="box">
4 <div class="pic">
5 <img src="images/0.jpg" alt="">
6 </div>
7 </div>
8 <div class="box">
9 <div class="pic">
10 <img src="images/1.jpg" alt="">
11 </div>
12 </div>
13 <div class="box">
14 <div class="pic">
15 <img src="images/2.jpg" alt="">
16 </div>
17 </div>
18 <div class="box">
19 <div class="pic">
20 <img src="images/3.jpg" alt="">
21 </div>
22 </div>
23 <div class="box">
24 <div class="pic">
25 <img src="images/4.jpg" alt="">
26 </div>
27 </div>
28 <div class="box">
29 <div class="pic">
30 <img src="images/2.jpg" alt="">
31 </div>
32 </div>
33 <div class="box">
34 <div class="pic">
35 <img src="images/3.jpg" alt="">
36 </div>
37 </div>
38 <div class="box">
39 <div class="pic">
40 <img src="images/4.jpg" alt="">
41 </div>
42 </div>
43 <div class="box">
44 <div class="pic">
45 <img src="images/5.jpg" alt="">
46 </div>
47 </div>
48 <div class="box">
49 <div class="pic">
50 <img src="images/6.jpg" alt="">
51 </div>
52 </div>
53 <div class="box">
54 <div class="pic">
55 <img src="images/7.jpg" alt="">
56 </div>
57 </div>
58 <div class="box">
59 <div class="pic">
60 <img src="images/3.jpg" alt="">
61 </div>
62 </div>
63 <div class="box">
64 <div class="pic">
65 <img src="images/4.jpg" alt="">
66 </div>
67 </div>
68 <div class="box">
69 <div class="pic">
70 <img src="images/5.jpg" alt="">
71 </div>
72 </div>
73 <div class="box">
74 <div class="pic">
75 <img src="images/3.jpg" alt="">
76 </div>
77 </div>
78 <div class="box">
79 <div class="pic">
80 <img src="images/4.jpg" alt="">
81 </div>
82 </div>
83 <div class="box">
84 <div class="pic">
85 <img src="images/5.jpg" alt="">
86 </div>
87 </div>
88 <div class="box">
89 <div class="pic">
90 <img src="images/6.jpg" alt="">
91 </div>
92 </div>
93 <div class="box">
94 <div class="pic">
95 <img src="images/7.jpg" alt="">
96 </div>
97 </div>
98 <div class="box">
99 <div class="pic">
100 <img src="images/3.jpg" alt="">
101 </div>
102 </div>
103
138 </div>
139 </body> 1 * {
2 margin: 0;
3 padding: 0;
4 }
5 #main {
6 position: relative;
7
8 }
9 .box {
10 padding:15px 0 0 15px;
11 float:left;
12 }
13 .pic {
14 padding: 10px;
15 border: 1px solid #ccc;
16 border-radius: 5px;
17 box-shadow: 0px 0px 5px #ccc;
18 img {
19 width:165px;
20 height:auto;
21 }
22 }(関数に瑕疵があります.理解を学ぶためにのみ使用します.)
1 window.onload = function () {
2 waterfall("main","box");
3 // ; main box ;
4
5 var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
6 // json ;
7 window.onscroll = function () {
8 if (checkScrollSlide) {
9 // ; ;
10 var oParent = document.getElementById("main");
11
12 for (var i = 0; i < dataInt.data.length; i++) {
13 var oBox = document.createElement("div");
14 oBox.className = "box";
15 oParent.appendChild(oBox);
16 // box
17
18 var oPic = document.createElement("div");
19 oPic.className = "pic";
20 oBox.appendChild(oPic);
21 // pic
22
23 var oImg = document.createElement("img");
24 // img
25 oImg.src = "images/"+dataInt.data[i].src;
26 // ;
27 oPic.appendChild(oImg);
28
29 };
30 waterfall("main","box");
31 // ;
32 };
33 };
34 };
35
36 // , ;
37 function waterfall (parent,box) {
38 // main box ;"parent" ,box box ;
39 var oParent = document.getElementById(parent);
40 // oParent;
41 var oBoxs = getByClass(oParent,box);
42 // , box ; box ;
43 // box oBoxs;( , );
44 // console.log(oBoxs.length);
45 // box , ;
46
47 var oBoxW = oBoxs[0].offsetWidth;
48 // ;offsetWidth ;
49 // console.log(oBoxW); ;
50 var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
51 // ( /box );
52
53 oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";
54 // main = * ; ;
55
56 var hArr = [];
57 // ;
58 for (var i = 0; i < oBoxs.length; i++) {
59 // oBoxs ;
60 if (i<cols) {
61 // ;
62 hArr.push(oBoxs[i].offsetHeight);
63 // ;
64 }else{
65 // box ;
66 var minH = Math.min.apply(null,hArr);
67 // ;
68 // console.log(minH);
69
70 var index = getMinhIndex(hArr,minH);
71 // index ;
72
73 oBoxs[i].style.position = "absolute";
74 oBoxs[i].style.top = minH+"px";
75 oBoxs[i].style.left = oBoxW*index+"px";
76 // ;
77 // left = index * ;
78 //oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";
79 // left ;
80 // index box ;
81
82 hArr[index]+=oBoxs[i].offsetHeight;
83 // = + box ;
84 };
85 };
86 };
87
88 //js Class ;
89 function getByClass (parent,claName) {
90 // class ;( parent claName ;)
91 var boxArr = new Array();
92 // , class box ;
93 var oElements = parent.getElementsByTagName("*")
94 // (*);
95 for (var i = 0; i < oElements.length; i++) {
96 // oElements;
97 if (oElements[i].className==claName) {
98 // calss claName ;
99 boxArr.push(oElements[i]);
100 // box boxArr ;
101 };
102 };
103 return boxArr;
104 // , , ; ;
105 };
106
107 // index ;
108 function getMinhIndex (arr,val) {
109 //arr ;val ;
110 for(var i in arr){
111 // 0 ;
112 if(arr[i]==val){
113 // index ;
114 return i;
115 // index ;
116 };
117 };
118 };
119
120 // ;
121 function checkScrollSlide () {
122 var oParent = document.getElementById("main");
123 var oBoxs = getByClass(oParent,"box");
124 var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
125 // box ( box(oBoxs.lenght-1) offsetTop)+ ;
126 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
127 // ;
128 // console.log(scrollTop);
129
130 var height = document.body.clientHeight || document.documentElement.clientHeight;
131 // ;
132 // console.log(height);
133 return (lastBoxH<scrollTop+height)?true:false;
134 // box offsetTop;
135 };