首頁 > 開發者 > JavaScript
基於JavaScript實現瀑布流效果(迴圈漸近)，javascript漸近
1.建立Html模版
想法是先用一個div container承載所有內容,然後div box用來放置圖片,最後div box_border來當圖片框,代碼如下
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>瀑布流</title></head><body><div class="container" id="container"><div class="box_border" id="box_border"><div class="box" id="box1"><img src="image/01.jpg"></div><!--把Box複製多份,這裡因為代碼重複省略了--></div></div></body></html>
效果:(未設定css屬性所以都是垂直放置的)
2.通過css簡單設定樣式
主要設定水平放置,相框顏色,邊界之類的
/*邊界不留空,背景黑灰*/body{margin: 0px;background: darkgray;}/*總布局設定為相對布局*/.container{position: relative;}/*設定box屬性*/.box{padding: 5px;float: left;}/*設定圖片邊框陰影和圓角*/.box_border{padding: 5px;border: 1px solid #cccccc;box-shadow: 0px 0px 5px #ccc;border-radius: 5px;}/*設定圖片格式*/.box_border img{width: 150px;height: auto;}
效果:(邊框什麼都有了)
3.JS控制每一行所擺放的圖片個數
上面的css布局之後,瀏覽器視窗大小改變,裡面的圖片數量也會改變,現在要用JS固定住每一行的圖片數量,對於不同尺寸的螢幕都能做到很好的效果
/*用於載入其他函數*/window.onload = function(){setImgLocation("container");}/*設定圖片個數*/function setImgLocation(parent){var cparent = document.getElementById(parent);//得到父節點var childArray = getChildNodes(cparent);//得到圖片數量var imgWidth = childArray[0].offsetWidth;//擷取照片寬度var screenWidth = document.documentElement.clientWidth;//擷取瀏覽器寬度var count = Math.floor(screenWidth/imgWidth);//每行的個數cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設定其寬度並置中}/*擷取全部圖片的個數*/function getChildNodes(parent){var childArray =[];//定義一個數組存放圖片boxvar tempNodes = parent.getElementsByTagName("*");//擷取父節點下的所有節點//迴圈添加class為box的節點for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子節點}
:針對不同螢幕大小顯示的個數是不一樣的
4.JS實現靜態瀑布流
先實現靜態布局,也就是瀏覽器下拉不會自動重新整理出新的圖片.
實現排列演算法很簡單
1.把第一排圖片的高度全部存到一個數組
2.計算出第一排中的圖片的最小高度和對應位置
3.把第一排之後的第一個圖片放到該位置上
4.重新設定該位置的高度為兩個圖片相加
5.迴圈2剩餘全部圖片
代碼:
/*用於載入其他函數*/window.onload = function(){setImgLocation("container");}/*設定圖片個數及位置排列*/function setImgLocation(parent){var cparent = document.getElementById(parent);//得到父節點var childArray = getChildNodes(cparent);//得到圖片數量var imgWidth = childArray[0].offsetWidth;//擷取照片寬度var screenWidth = document.documentElement.clientWidth;//擷取瀏覽器寬度var count = Math.floor(screenWidth/imgWidth);//每行的個數cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設定其寬度並置中//定義數組,存放第一行照片高度var imgHArray = [];//迴圈遍曆圖片for(var i=0;i<childArray.length;i++){//如果圖片在第一行則擷取高度if(i<count){imgHArray[i] = childArray[i].offsetHeight;}else//否則把最小高度的填充剩餘圖片{var minHeight = Math.min.apply(null,imgHArray);//擷取最小高度var minIndex = getMinIndex(minHeight,imgHArray);//擷取最小高度對應的下標childArray[i].style.position = "absolute";//設定要填充的圖片盒子為絕對布局,否則不能更換位置childArray[i].style.top = minHeight+"px";//設定要填充圖片距頂高度childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//設定要填充圖片距左高度imgHArray[minIndex] += childArray[i].offsetHeight;//填充後把當前位置高度設為兩個圖片相加//開始下一輪迴圈}}}/*擷取最小高度對應的下標*/function getMinIndex(minHeight,imgHArray){for(var i in imgHArray){if(imgHArray[i] == minHeight){return i;}}}/*擷取全部圖片的個數*/function getChildNodes(parent){var childArray =[];//定義一個數組存放圖片boxvar tempNodes = parent.getElementsByTagName("*");//擷取父節點下的所有節點//迴圈添加class為box的節點for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子節點}
效果:
5.js實現動態載入
動態載入也就是捲軸永遠滑不到底部,要解決動態載入我們需要考慮兩個問題:
1.什麼時候載入?
滑動距離+瀏覽器高度>最後一張圖片距離頂部的距離
2.怎樣載入?
通過建立新的節點,把建立的節點添加進去即可
最終代碼:
/*用於載入其他函數*/window.onload = function() {var cparent = document.getElementById("container");//得到父節點setImgLocation(cparent);//設定載入的圖片var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg","image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];//滑動監聽window.onscroll = function () {if (checkLoad(cparent)) {for (var i = 0; i < data.length; i++) {//建立新的節點var div1 = document.createElement("div");div1.className = "box";var div2 = document.createElement("div");div2.className = "box_border";var img = document.createElement("img");img.className = ".box_border img";img.src = data[i];div2.appendChild(img);div1.appendChild(div2);cparent.appendChild(div1);}setImgLocation(cparent);//建立節點後重新排列}}}/*檢查是否應該載入*/function checkLoad(cparent){var childArray = getChildNodes(cparent);//得到圖片個數var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最後一張圖片距離頂部高度var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//獲得滑動距離(瀏覽器安全色性真煩人)var browserHeight = document.documentElement.clientHeight;//獲得瀏覽器高度if(lastImgHight < scrollHeight+browserHeight){//判斷是否載入return true;}else {return false;}}/*設定圖片個數及位置排列*/function setImgLocation(cparent){var childArray = getChildNodes(cparent);//得到圖片數量var imgWidth = childArray[0].offsetWidth;//擷取照片寬度var browserWidth = document.documentElement.clientWidth;//擷取瀏覽器寬度var count = Math.floor(browserWidth/imgWidth);//每行的個數cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設定其寬度並置中//定義數組,存放第一行照片高度var imgHArray = [];//迴圈遍曆圖片for(var i=0;i<childArray.length;i++){//如果圖片在第一行則擷取高度if(i<count){imgHArray[i] = childArray[i].offsetHeight;}else//否則把最小高度的填充剩餘圖片{var minHeight = Math.min.apply(null,imgHArray);//擷取最小高度var minIndex = getMinIndex(minHeight,imgHArray);//擷取最小高度對應的下標childArray[i].style.position = "absolute";//設定要填充的圖片盒子為絕對布局,否則不能更換位置childArray[i].style.top = minHeight+"px";//設定要填充圖片距頂高度childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//設定要填充圖片距左高度imgHArray[minIndex] += childArray[i].offsetHeight;//填充後把當前位置高度設為兩個圖片相加//開始下一輪迴圈}}}/*擷取最小高度對應的下標*/function getMinIndex(minHeight,imgHArray){for(var i in imgHArray){if(imgHArray[i] == minHeight){return i;}}}/*擷取全部圖片的個數*/function getChildNodes(parent){var childArray =[];//定義一個數組存放圖片boxvar tempNodes = parent.getElementsByTagName("*");//擷取父節點下的所有節點//迴圈添加class為box的節點for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子節點}
效果:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
