在實際開發中，經常會遇到圖片排序處理的問題，進過多次嘗試，我在這里總結兩種圖片水平排序的方式：
第一種：CSS屬性直接設定圖片樣式
具體是使用CSS中的column-count屬性，給圖片的外部box設定后，里面的img可以直接根據數量來進行排序
頁面效果就是以下這樣：
html和css代碼如下：
可能細心的你會發現，但是這個屬性可以進行水平對齊，但是排序會出現問題，所以應用場景有限，但是優勢也很明顯，就是省事(*^▽^*)，
第二種：使用js代碼來動態進行設定
原理是通過一個數學邏輯來對圖片進行計算，假設我們需要把4張大小不同的圖片進行水平瀑布流對齊，我們需要先計算好所有圖片的高寬比，然后給一個統一的高度，根據這個統一的高度進行排序，我們可以獲得一個長方形，
這個長方形也是有寬高比的，我們把它計算出來，然后將寬度調整為頁面寬度，那么這個時候高度我們自需要調整寬高比就可以確定，根據這個調整好的高度，我們再根據4張圖片的寬高比，來獲取這個時候的寬度，對圖片進行排序即可，
案例如下：
第一張圖片：400*300，寬高比為4:3
第二張圖片：500*100，寬高比為5:1
第三張圖片：200*500，寬高比為2:5
第四張圖片：200*100，寬高比為2:1
我們首先確定一個高度，這里設定為300
那么總的長方形寬度為2620，
這個長方形的寬高比為131：15
接下來我們需要獲取頁面寬度，這里以1920為例，
那么安裝這個比例來調整總長方形，它的高度為219.84，這里小數點兩位后的可以直接舍棄，從頁面顯示來看無關痛癢
那么安裝這個高度，我們再反推4張圖片的寬度為：
第一張圖片：293.12*219.84
第二張圖片：1099.2*219.84
第三張圖片：87.963*219.84
第四張圖片：439.68*219.84
這四張圖片的總寬度為：1919.963
根據這個邏輯來設定js代碼，對所有的圖片進行分組，在分組中進行這樣的操作，就可以實作圖片水平瀑布流布局，代碼設計的好，可以兼容所有寬度，一切隨心所欲，但缺點也是有的，就是麻煩，麻煩，麻煩，而且考慮到這套邏輯實作，
對記憶體的占用量較大，對懶加載也很不友好，需要改邏輯才可以兼容欄加載和圖片快取︿(￣︶￣)︿，
這里提供一個案例dome給大家進行觀看和除錯
http://www.linheng.xyz/project/sppbl/index.html
效果如下（具備簡單的懶加載功能）：
主要代碼如下：
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>水平瀑布流懶加載</title> </head> <style> * { margin: 0; padding: 0; }
h1 { text-align: center; }
.box { overflow: auto; /* width:80%; */ border: 1px black solid; margin: 0 auto; }
.box img { float: left; display: block; } </style>
<body> <h1>水平瀑布流</h1> <div ></div> </body> <script> var box = document.getElementsByClassName("box")[0]; var imglist = []; var img, length = 0, count = 0, line = 3; // console.log(box); var maxwidth = window.innerWidth - 100; box.style.width = maxwidth + "px"; addimg(20);
function fomate() { var row = Math.floor(length / line);
// console.log(row); for (var i = 0; i < row; i++) { var w = 0; //每行的寬度和
for (var j = 0; j < line; j++) { if (imglist[i * line + j].prop != undefined) { w += imglist[i * line + j].prop * 300; //單張圖片以300為高的寬度累加到w中 }
}
// console.log(w); var h = 300 * maxwidth / w;
for (var j = 0; j < line; j++) { if (imglist[i * line + j].prop != undefined) { imglist[i * line + j].style.height = h + "px"; imglist[i * line + j].style.width = h * imglist[i * line + j].prop + "px"; }
} } }
window.onresize = function () { maxwidth = window.innerWidth - 100; box.style.width = maxwidth + "px"; fomate(); }
window.onscroll = function () { var scroll = document.documentElement.scrollTop; var screen = window.innerHeight; var offsetTop = box.offsetTop; var height = box.offsetHeight;
if (scroll + screen - offsetTop - height > -20) { addimg(20); }
; }
function addimg(i) { length += i;
// console.log(length); for (var i = 1; i <= 20; i++) { img = createimg("img/pics (" + i + ").jpg", box); imglist.push(img); // console.log(imglist.length);
} }
function createimg(src, pad) { //創建圖片的方法 var length = 20; count = 0; var img = document.createElement("img"); img.src = src; pad.appendChild(img);
img.onload = function () { this.prop = this.width / this.height; count++; // console.log(count);
if (count == length) { fomate(); } }
return img;
} </script>
</html>
以上是我總結出的兩種方法，如果有更好的方法，歡迎你在評論進行補充ヾ(?°?°?)??，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/16248.html
標籤：Html/Css
上一篇：網頁添加 Live2D 看板娘
下一篇：零基礎如何自學web前端開發?