两种方式实现水平瀑布流布局
在实际开发中，经常会遇到图片排序处理的问题，进过多次尝试，我在这里总结两种图片水平排序的方式：
第一种：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>
以上是我总结出的两种方法，如果有更好的方法，欢迎你在评论进行补充ヾ(◍°∇°◍)ﾉﾞ。
