在實際開發中，經常會遇到圖片排序處理的問題，進過多次嘗試，我在這里總結兩種圖片水平排序的方式：
第一種：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 class="box"></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>
以上是我總結出的兩種方法，如果有更好的方法，歡迎你在評論進行補充ヾ(◍°∇°◍)ﾉﾞ。