瀑布流,又稱瀑布流式佈局,是比較流行的一種網站頁面佈局,相信有些同學還是並不太懂或並沒有了解過瀑布流是什麼,那麼我們今天就來詳細的講一下JavaScript是如何實現瀑布流的吧。
知識點:
#1、如何找到陣列中的最小值.
預設第一個為最小值,綁定一個變數a 。透過for迴圈將陣列其它值與該值進行對比,如果前者小則將其賦值給a;
var arr = [3,52,3,2,-2,-1,20]; var min = arr[0]; for (var i = 0; i < arr.length; i++) { if (arr[i] < arr[0]) { min = arr[i]; } } alert(min);
2、怎樣取得文件座標
//获取父元素节点 var op = ele.parentNode; 则ele文档坐标:水平:op.offsetLeft + op.clientLeft + ele.offsetLeft; 垂直:op.offsetTop + op.clientTop + ele.offsetTop;
#3、取得隨機整數函數
function rnd(min,max) { return parseInt(Math.random()*(max - min + 1)) + min; }
4、瀑布流程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style type="text/css"> * { padding: 0; margin: 0; } #wrap { overflow: hidden; margin-top: 100px; } #wrap li { float: left; width: 250px; font-size: 56px; margin: 0 20px; list-style-type: none; } #wrap li p { margin-bottom: 20px; border: 1px solid red; background-color: #ccc; } </style> </head> <body> <ul id="wrap"> <li> </li> <li> </li> <li> </li> </ul> <p style="height: 1000px;"> </p> <script type="text/javascript"> var wrap = document.getElementById("wrap"); var list = wrap.getElementsByTagName("li"); function rnd(min, max) { return parseInt(Math.random()*(max - min + 1)) + min; } //文档坐标获取 function getPosition(element) { var oP = element.offsetParent; var x = element.offsetLeft; var y = element.offsetTop; while(oP) { //水平 x = oP.clientLeft + x + oP.offsetLeft; //竖直 y = oP.clientTop + y + oP.offsetTop; oP = oP.offsetParent; } return {x:x,y:y} } function createDiv() { for(var j = 0; j < 10; j++) { //找最小高度的li那一列 var minList = list[0]; for(var i = 0; i < list.length; i++) { if(minList.offsetHeight > list[i].offsetHeight) { minList = list[i]; } } var newDiv = document.createElement("p"); newDiv.style.height = rnd(100,200) + "px"; newDiv.innerHTML = j; minList.appendChild(newDiv);//将创建p添加到最新的li那一列 } } createDiv(); //可视区的宽高document.documentElement.clientWidth //页面滚动条事件 window.onscroll = function() { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //wrap的文档坐标+wrap自身高度 跟滚动条scrollTop+可视区高度比较 if(getPosition(wrap).y + wrap.offsetHeight <= scrollTop + document.documentElement.clientHeight) { // alert("到底了"); createDiv(); } } </script> </body> </html>
瀑布流是一種網站頁面佈局,視覺表現為參差不齊的多欄佈局,隨著頁面滾動條向下滾動,這種佈局也會不斷載入資料塊並附加至目前尾部。最早採用此佈局的網站是Pinterest,逐漸在國內流行開來。國內大多數清新站基本上為這類風格。
以上是JavaScript簡單的實作瀑布流的詳細內容。更多資訊請關注PHP中文網其他相關文章!