javascript
利用JS实现简单的瀑布流效果
轉載：https://www.cnblogs.com/dyx-wx/p/4642637.html
一.瀑布流之準備工作
??首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那么我就來簡單介紹下本地的瀑布流效果吧, 我們要先準備好八九張圖片, 當然啦, 我們實現的是瀑布流效果, 所以最好是高度不相同的, 這樣才可以看出來效果, 對吧, 嘿嘿.
二.代碼的準備工作
?我們打開開發工具, 先建個html工程, 在內部寫下如下代碼, 因為是準備工作, 所以剛開始寫的都是一些基礎性的東西, 就不一一解釋了, 直接上代碼:
<body> <div id="container"><div class="box"><div class="boximg"><img src="img/1.jpeg"></div></div><div class="box"><div class="boximg"><img src="img/2.jpg"></div></div><div class="box"><div class="boximg"><img src="img/3.jpg"></div></div><div class="box"><div class="boximg"><img src="img/4.jpg"></div></div><div class="box"><div class="boximg"><img src="img/5.jpg"></div></div><div class="box"><div class="boximg"><img src="img/6.jpg"></div></div><div class="box"><div class="boximg"><img src="img/7.gif"></div></div><div class="box"><div class="boximg"><img src="img/8.jpg"></div></div><div class="box"><div class="boximg"><img src="img/9.jpg"></div></div><div class="box"><div class="boximg"><img src="img/9.jpg"></div></div><div class="box"><div class="boximg"><img src="img/9.jpg"></div></div><div class="box"><div class="boximg"><img src="img/9.jpg"></div></div></div></body>??很明顯這段代碼中也就是幾個div標簽和幾個img標簽, 所以是很簡單的, 就不多說了, 下面我們來布置css樣式.
三.css樣式布置
?說句比較實在的話, 對于瀑布流而言, 因為我只是簡單的模擬下, 所以css樣式的定制, 我并沒有特別復雜的定制, 只是簡單的把邊框和容器(div)大小給定制了下, 還有一些顏色, 話不多說, 直接上代碼吧
/*使用通配符將內外邊距都設置為零, 這樣看著好看*/ *{margin: 0px;padding: 0px; } /*將主容器的布局方式設置為相對布局*/ #contianer{position: relative; }.box{padding: 5px;float: left; } /*將承載圖片的容器定制顏色及邊框大小和圓角*/ .boximg{padding: 5px;box-shadow: 0 0 5px #ccc;border: 1px solid #cccccc;border-radius: 5px; } /*定制圖片尺寸*/ .boximg img{width: 250px;height: auto; }代碼中注釋已經解釋的很清楚了, 就不再過多的贅述了.
四.重點也是瀑布流的難點(JS的實現)
? 大家對于瀑布流都不陌生吧, 它主要是頂寬的, 然后根據高度來進行布局, 也就是說在第一行鋪滿后, 準備排布第二行的時候, 將第二行的第一種圖片放在第一行圖片高度最小處, 之后依次類推, 先簡單的上些代碼, 然后一一作解釋了, 正所謂有圖有真相, 哈哈!
? ? 這就是在未編寫js代碼時的效果圖, 那么按道理來說下面的圖片應該放在第一行第二張圖片的位置下面, 應該充分利用空白資源, 那么這要如何來實現呢, 接下來我就附上代碼來告訴大家了:
window.onload = function(){waterFlow("container", "box");} function waterFlow(parent, chirld){var wparent = document.getElementById(parent);//獲取父級div, 最外級容器var allArr = getAllChirld(wparent,chirld);//獲取到所有的class為box的容器divvar wscreenWidth = document.documentElement.clientWidth;//獲取屏幕寬度var wchirldWidth = wparent.getElementsByTagName("*");//獲取所有的標簽var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//這是一個Math算法, 目的是將小數轉變為整數,// 從而可以知道每行最多容納幾張圖片wparent.style.cssText = 'width:'+wchirldWidth[0].offsetWidth*num+'px;margin:0 auto';//固定每行擺放個數 和上下左右邊距//獲得每行的最小高度 getMinHeightOfCols(allArr, num); } function getAllChirld(parent,classname){//獲取所有的標簽var wchirld = parent.getElementsByTagName("*");//創建數組var chirldArr = [];//遍歷wchirld, 將其中className等于classname(傳進來的參數)相同的標簽放入數組chirldArr中for(var i = 0; i<wchirld.length; i++){if(wchirld[i].className==classname){//因為是位push所以沒放進去一個, 都是在數組的最后一個 chirldArr.push(wchirld[i]);}}//返回該數組return chirldArr; } function getMinHeightOfCols(chirdArr, num){//創建數組, 用來盛放每一行的高度var onlyOneColsArr = [];for(var i = 0; i<chirdArr.length; i++){if(i<num){//num為傳進來的參數, 即為每行放圖片的張數, 此步驟的目的是為了將第一行每張圖片的高度遍歷出來存放如新數組onlyOneColsArr[i]=chirdArr[i].offsetHeight;} else {//當大于每行存放的圖片個數時進入該方法, Math.min.apply這個方法是為了得到數組中的最小值var minHeightOfCols = Math.min.apply(null, onlyOneColsArr);//此方法的目的是為了得到最小高度圖片的下表, 也就是在每行的第幾張, 具體方法見下面var minHeightOfindex = getminIndex(onlyOneColsArr, minHeightOfCols);//定義布局方式為絕對布局chirdArr[i].style.position = "absolute";//得到下一行圖片應放的高度chirdArr[i].style.top = minHeightOfCols + "px";//得到下一行圖片應放于那個位置chirdArr[i].style.left = chirdArr[minHeightOfindex].offsetLeft + "px";//將兩張圖片高度相加得到一個新的高度用來進行下一次的計算onlyOneColsArr[minHeightOfindex] += chirdArr[i].offsetHeight;}}} //此方法是為了進行最小高度下標的確定 function getminIndex(onlyOneColsArr, min){//遍歷傳進來的高度數組for(var i in onlyOneColsArr){//如果高度等于最小高度, 返回i即為該圖片下標if(onlyOneColsArr[i] == min){return i;}} }注釋已經很清楚了, 如果還有不了解不知道的地方, 歡迎評論留言, 下面就讓我們來看下效果圖吧, 嘿嘿
五.瀑布流之模擬網絡加載
?寫到這里很多人肯定認為已經差不多結束了, 但是我來拓展點小知識吧, 那就是如何實現類似于網絡上的無限加載, 下面附上代碼吧, 由于時間有點緊張就不做詳細的介紹了, 有不懂得歡迎細問:
window.onload = function(){waterFlow("container", "box");var dataInt={'data':[{'src':'1.jpeg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.gif'},{'src':'8.jpg'},{'src':'9.jpg'}]};window.onscroll=function(){if(checkscrollside()){var oParent = document.getElementById('container');// 父級對象for(var i=0;i<dataInt.data.length;i++){var oPin=document.createElement('div'); //添加 元素節點oPin.className='box'; //添加 類名 name屬性oParent.appendChild(oPin); //添加 子節點var oBox=document.createElement('div');oBox.className='boximg';oPin.appendChild(oBox);var oImg=document.createElement('img');oImg.src='./img/'+dataInt.data[i].src;oBox.appendChild(oImg);}waterFlow('container','box');};} }?以上就是簡單的瀑布流效果, 還不錯吧, 加油嘍!
轉載于:https://www.cnblogs.com/lst619247/p/9298375.html
總結
以上是生活随笔為你收集整理的利用JS实现简单的瀑布流效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 词向量之Word2vector原理浅析
- 下一篇： 洛谷 P2184 贪婪大陆 解题报告