溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript如何實現瀑布流布局效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript如何實現瀑布流布局效果”吧！
思路：將內容寬度一致，高度不一致的圖片，從左至右排列，一行內容排滿后，下一張就會按順序排在最短的內容后，以此類推。
在頁面放入20個box容器（幾張圖片就放幾個容器），為方便給圖片添加好看的樣式，我在box容器里放了個box-img容器，再將圖片放入。
<body> <div id="container"> <div class="box"> <div class="box-img"> <img src="./img1/1 (1).JPG" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img1/1 (2).JPG" alt=""> </div> </div> /*此處省多個box 幾張圖片就放幾個box容器*/ </body>
* {
margin: 0;
padding: 0;
}
/*讓圖片向左浮動*/
.box {
float: left;
}
/*定位*/
.container {
position: relative;
}
/*給圖片容器設置相同的寬度 邊框 盒子陰影*/
.box-img {
width: 150px;
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
/*讓圖片與圖片容器寬度相等*/
.box-img img {
width: 100%;
}我們的目的其實就是要擺放圖片的位置，先獲取到所有的圖片，當第一排向左浮動擺放好后，我們需要找到在第二排開始從誰是被需要擺放位置的。那就用屏幕視窗的寬度除以一個圖片盒子的寬度，向下取整，那就知道第一行能放幾張圖，然后我們操作第num張之后的每一張圖，把它們一一擺放到最矮那一列的位置。
window.onload = function() {
imgLocation('container', 'box')
}
//獲取到所有要擺放的圖片
function imgLocation(parent,content){
var cparent = document.getElementById(parent)
// cparent 下的所有的第一層的子容器 box
var ccontent = getChildElement(cparent,content) //[裝了20個div]
//找從誰開始是需要被擺放位置的
var winWidth = document.documentElement.clientWidth //獲取視窗的寬度
var imgWidth = ccontent[0].offsetWidth //獲取圖片盒子的寬度
var num = Math.floor(winWidth / imgWidth) //向下取整
// 操作第 num+1 張圖
var BoxHeightArr = []
for (var i = 0; i < ccontent.length; i++){
// 前num張只要計算高度
if (i < num) {
BoxHeightArr[i] = ccontent[i].offsetHeight
}else{
//我們要操作的Box
var minHeight = Math.min.apply(null,BoxHeightArr)
var minIndex = BoxHeightArr.indexOf(minHeight)
ccontent[i].style.position = 'absolute'
ccontent[i].style.top = minHeight + 'px'
ccontent[i].style.left = (imgWidth * minIndex) + 'px'
//更新最矮的那一列的高度
BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
}
}
}在外面創建一個輔助函數，可以幫我們取到父容器中的某一層子容器
function getChildElement(parent,content){
var contentArr = []
var allContent = parent.getElementsByTagName('*') //[xxxx數組]
//遍歷allContent 把中其類名為 content 的容器都存到contentArr數組中
for (var i = 0; i < allContent.length; i++){
//當前這個容器的類名是否為 content
if (allContent[i].className == content){
contentArr.push(allContent[i])
}
}
return contentArr
}良好的視覺體驗 ；參差不齊的排列方式，以及流動布局的擴展性，打破常規網站布局排版，用戶在瀏覽內容時會有新鮮感，帶來良好的視覺體驗。
吸引用戶；可以通過界面展示給用戶多條數據，并且讓用戶有可以向下瀏覽的沖動。
適應移動端；移動設備都偏小，屏幕能顯示的內容不會很多，如果經常翻頁的話顯得疲勞，使用瀑布流布局用戶只需要不停滾動就能不斷地進行瀏覽。
感謝各位的閱讀，以上就是“JavaScript如何實現瀑布流布局效果”的內容了，經過本文的學習后，相信大家對JavaScript如何實現瀑布流布局效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
