滑動滾動條，動態添加、排序圖片至底部（很漂亮的無限復制照片墻）
~~~
//css 修飾部分
<style>
*{
margin: 0;
padding: 0;
}
#container{margin-left: auto;margin-right: auto;position: relative;}
#container:after{
content: "";
display: table;
clear: both;
}
.content{
float: left;
box-shadow: 0 0 1px 1px rgba(51, 51, 51, 0.1);
}
img{
width: 250px;
padding: 5px;
vertical-align: bottom;
}
</style>
~~~
~~~
//body 部分
<div id="container">
<div class="content">
<img src="images/01.jpg" alt="">
</div>
<div class="content">
<img src="images/02.jpg" alt="">
</div>
<div class="content">
<img src="images/03.jpg" alt="">
</div>
<div class="content">
<img src="images/04.jpg" alt="">
</div>
<div class="content">
<img src="images/05.jpg" alt="">
</div>
<div class="content">
<img src="images/06.jpg" alt="">
</div>
<div class="content">
<img src="images/07.jpg" alt="">
</div>
<div class="content">
<img src="images/08.jpg" alt="">
</div>
<div class="content">
<img src="images/09.jpg" alt="">
</div>
<div class="content">
<img src="images/10.jpg" alt="">
</div>
<div class="content">
<img src="images/11.jpg" alt="">
</div>
<div class="content">
<img src="images/12.jpg" alt="">
</div>
<div class="content">
<img src="images/01.jpg" alt="">
</div>
<div class="content">
<img src="images/02.jpg" alt="">
</div>
</div>
~~~
~~~
//js 修飾部分
<script>
// 先加載頁面后執行js
window.onload = function(){
var url = {
dataUrl: [{
src: "01.jpg"
}, {
src: "02.jpg"
}, {
src: "03.jpg"
}, {
src: "04.jpg"
}, {
src: "05.jpg"
}, {
src: "06.jpg"
}, {
src: "07.jpg"
}, {
src: "08.jpg"
}, {
src: "09.jpg"
}, {
src: "10.jpg"
}, {
src: "11.jpg"
}, {
src: "12.jpg"
}]
}
var contents = document.getElementsByClassName("content");
var container = document.getElementById("container");
var data = url.dataUrl;
putimg();
window.onscroll = function(){
if(scondition()){
for(let i=0;i<data.length;i++){
let img = document.createElement("img");
img.src = "images/" + data[i].src;
let div = document.createElement("div");
div.className = "content";
div.append(img);
container.append(div);
putimg();
}
}
}
//判斷滾動條距頂部的距離
function scondition(){
var sh = document.documentElement.scrollTop;
var vh = document.documentElement.clientHeight;
var offsettop = contents[contents.length-1].offsetTop + contents[contents.length-1].offsetHeight/3;
return sh+vh > offsettop?true:false;
}
function putimg(){
var ww = window.innerWidth;
var cw = contents[0].offsetWidth;
//一排能放幾張圖片
var num = Math.floor(ww/cw);
container.style.width = cw*num + "px";
//將第一排的高度放入一個數組中
var content_arr = Array.prototype.slice.call(contents);
var arr_height = [];
content_arr.forEach((element,index)=>{
if(index<num){
arr_height.push(element.offsetHeight);//遍歷數組并將數組值放入arr_height中
}else{
var minheight = Math.min(...arr_height);
var minindex = arr_height.indexOf(minheight);
var offsetleft = content_arr[minindex].offsetLeft;
//這里element就是content_arr[i];
element.style.position = "absolute";
element.style.top = minheight + 1 + "px";
element.style.left = offsetleft + "px";
//將數組中最小高度的數值改變
arr_height[minindex] += element.offsetHeight;
}
})
}
}
</script>
~~~
