js图片瀑布流
? 一個簡單的圖片瀑布流
首先準備一個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.οnlοad=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.οnscrοll= function () { 10 if(checkflag()){ 11 //動態(tài)增加圖片,實現自動加載 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 }此時就實現了圖片瀑布流的效果,可以放在網站里了...
轉載于:https://www.cnblogs.com/earthgee/p/4392581.html
總結
- 上一篇： poj 1995 Raising Mod
- 下一篇： 《返校》有哪些观察点？《返校》观察点一共