前言

完成一個動漫人物的瀑布流布局，分別通過原生JavaScript、Css3和Jquery方式實現。
首先是使用JavaScript。

一、創建基本框架

1 HTML結構

<main> //便于以后進行 相對定位<div class="wrap"> //為了方便設置圖片和圖片之間樣式+絕對定位<div class="pic"> //包裹圖片，設置單個圖片的樣式<img src="img/1.jpg" alt="圖片1"></div></div> </main>

2 CSS基本樣式

*{ /* 簡單全局重置 */margin: 0;padding: 0; }main{position: relative; /*相對布局*/ }.wrap{padding: 15px 0 0 15px; /*設置內邊距，便于以后JS計算高度*/ }.pic{border: 1px solid #ccc;padding: 10px;border-radius: 5px; /*設置邊框圓角 */box-shadow: 0 0 6px #ccc; /*水平、垂直偏移；模糊度；顏色*/ }.pic img{width: 162px; /*瀑布流特點，圖片等寬不等高 */height: auto; }

二、設置圖片的定位 和 排序

1 設置列數和main的寬度

window.onload=function(){waterfall("main",".wrap"); }function waterfall(parent,box){var oneparent = document.querySelector(parent); //獲取main元素//S1 獲取main元素里面的所有 類warp元素var boxs = oneparent.querySelectorAll(box); //S2 計算整個頁面顯示的列數；（頁面寬/每列的盒子wrap寬）var oneboxwidth = boxs[0].offsetWidth; //每列的盒子wrap寬var cols = Math.floor(document.documentElement.clientWidth / oneboxwidth) ; //獲取 整數列數//S3 設置main的 固定寬度oneparent.style.cssText = 'width:' + (oneboxwidth * cols)+'px; margin:0 auto'; }

2 獲取第一列圖片的高度

window.onload=function(){waterfall("main",".wrap"); }function waterfall(parent,box){var oneparent = document.querySelector(parent); //獲取main元素// 獲取main元素里面的所有 類warp元素var boxs = oneparent.querySelectorAll(box); ............//獲取第一列圖片的高度//S1 存放數據的 數組var boxsHeightArry = [];//S2 獲取圖片高度并存放for (var i=0; i<boxs.length; i++){if(i < cols){boxsHeightArry.push(boxs[i].offsetHeight);}}console.log(boxsHeightArry); }

3 絕對定位，把以后的圖片，都放到第一行最矮的下方

//S1 存放數據的 數組var boxsHeightArry = [];//S2 獲取圖片高度并存放for (var i=0; i<boxs.length; i++){if(i < cols){boxsHeightArry.push(boxs[i].offsetHeight);}else{//S1 獲取第一行的最小值&索引值minBoxHeight = Math.min.apply(null,boxsHeightArry);minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);//S2 調試 console.log( minBoxHeightIndex);//S3 設置第二行及以后行 圖片的絕對定位位置boxs[i].style.position = "absolute";boxs[i].style.top = minBoxHeight + 'px';boxs[i].style.left = oneboxwidth * minBoxHeightIndex + 'px';}}

4 每次循環時都增加后放的圖片的高度，從而改變數組里最矮的值

else{ //S1 獲取第一行的最小值&索引值minBoxHeight = Math.min.apply(null,boxsHeightArry);minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);//S2 調試 console.log( minBoxHeightIndex);//S3 設置第二行及以后行圖片的 絕對定位位置boxs[i].style.position = "absolute";boxs[i].style.top = minBoxHeight + 'px';// boxs[i].style.left = oneboxwidth * minBoxHeightIndex + 'px';boxs[i].style.left = boxs[minBoxHeightIndex].offsetLeft + 'px';//從第二行開始，每次循環時都增加后放的圖片的高度，從而改變數組里最矮的值boxsHeightArry[minBoxHeightIndex] += boxs[i].offsetHeight; }

四 Reference

??1 js改變css樣式的三種方法;

轉載于:https://www.cnblogs.com/ygming/p/8446850.html

總結

以上是生活随笔為你收集整理的瀑布流布局（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。