html代碼

<div id="content"><!-- <div><img src="img/1.jpg"><p>人在社會上呆的久了,很容易會發生變化,比如我以前一直在想著如何發家致富，現在我只想著脫貧</p></div> --> </div>

css代碼

* {margin: 0;padding: 0}#content {width: 960px;margin: 0 auto;position: relative;}#content > div {width: 220px;padding: 4px;border: 1px solid #000;}#content > div > img {width: 100%;}

JS代碼

/*找出這些列中最短的那一列然后在插入下一張圖片*///1、加載所有的圖片var str = "";var oContent = document.getElementById("content");for (var i = 1; i <= 70; i++) {str += `<div class="box"><img src="img/${i}.jpg"><p>人在社會上呆的久了,很容易會發生變化,比如我以前一直在想著如何發家致富，現在我只想著脫貧</p></div>`}oContent.innerHTML = str;//2。當頁面上所有的圖片 html css js都加載完畢以后var aBox = document.querySelectorAll(".box");window.onload = function () {//定義一個數組var iHeight = [0, 0, 0, 0];//找出4列for (var i = 0; i < 4; i++) {//每一個div都設置成定位aBox[i].style.position = "absolute";//每一個div的left值等于i*1張圖片的寬度 +10aBox[i].style.left = i * aBox[0].offsetWidth + 10 * i + "px";//因為4列的起始高度是一樣的 所有都設置成0aBox[i].style.top = 0;//當4列都定位安定好以后將這個4列的高度存入數組 方便下次從數組中找出最小的那個數字的下標iHeight[i] = aBox[i].offsetHeight;}//循環剩余的divfor (var i = 4; i < aBox.length; i++) {//找出最小值得下標var index = getIndex(iHeight);//設定所有的div都是定位aBox[i].style.position = "absolute";//下次插入的div的位置在最小的那一列的位置aBox[i].style.left = index * aBox[0].offsetWidth + 10 * index + 'px';//下次插入的div的top值是iHeight的高度+10aBox[i].style.top = iHeight[index] + 10 + 'px';//更新iHeight里面的高度 當前元素的高度+原有數組中最小值的高度iHeight[index] = aBox[i].offsetHeight + iHeight[index] + 10;}//封裝函數 找出數組里面最小值得下標function getIndex(arr) {var min = arr[0];var index = 0;for (var i = 0; i < arr.length; i++) {if (arr[i] < min) {min = arr[i];index = i;}}return index;}}

總結

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

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