溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript如何實現(xiàn)瀑布流布局效果”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript如何實現(xiàn)瀑布流布局效果”吧！
思路：將內(nèi)容寬度一致，高度不一致的圖片，從左至右排列，一行內(nèi)容排滿后，下一張就會按順序排在最短的內(nèi)容后，以此類推。
在頁面放入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;
}
/*給圖片容器設(shè)置相同的寬度 邊框 盒子陰影*/
.box-img {
width: 150px;
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
/*讓圖片與圖片容器寬度相等*/
.box-img img {
width: 100%;
}我們的目的其實就是要擺放圖片的位置，先獲取到所有的圖片，當?shù)谝慌畔蜃蟾訑[放好后，我們需要找到在第二排開始從誰是被需要擺放位置的。那就用屏幕視窗的寬度除以一個圖片盒子的寬度，向下取整，那就知道第一行能放幾張圖，然后我們操作第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
}
}
}在外面創(chuàng)建一個輔助函數(shù)，可以幫我們?nèi)〉礁溉萜髦械哪骋粚幼尤萜?/p>
function getChildElement(parent,content){
var contentArr = []
var allContent = parent.getElementsByTagName('*') //[xxxx數(shù)組]
//遍歷allContent 把中其類名為 content 的容器都存到contentArr數(shù)組中
for (var i = 0; i < allContent.length; i++){
//當前這個容器的類名是否為 content
if (allContent[i].className == content){
contentArr.push(allContent[i])
}
}
return contentArr
}良好的視覺體驗 ；參差不齊的排列方式，以及流動布局的擴展性，打破常規(guī)網(wǎng)站布局排版，用戶在瀏覽內(nèi)容時會有新鮮感，帶來良好的視覺體驗。
吸引用戶；可以通過界面展示給用戶多條數(shù)據(jù)，并且讓用戶有可以向下瀏覽的沖動。
適應(yīng)移動端；移動設(shè)備都偏小，屏幕能顯示的內(nèi)容不會很多，如果經(jīng)常翻頁的話顯得疲勞，使用瀑布流布局用戶只需要不停滾動就能不斷地進行瀏覽。
感謝各位的閱讀，以上就是“JavaScript如何實現(xiàn)瀑布流布局效果”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對JavaScript如何實現(xiàn)瀑布流布局效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼