两种方式实现水平瀑布流布局

时间 2020-09-14

标签两种方式实现水平瀑布布局栏目悠闲生活繁體版

原文原文链接

在实际开发中，常常会遇到图片排序处理的问题，进过屡次尝试，我在这里总结两种图片水平排序的方式：

第一种：CSS属性直接设置图片样式css

具体是使用CSS中的column-count属性，给图片的外部box设置后，里面的img能够直接根据数量来进行排序html

页面效果就是如下这样：缓存

html和css代码以下：app

可能细心的你会发现，可是这个属性能够进行水平对齐，可是排序会出现问题，因此应用场景有限，可是优点也很明显，就是省事(*^▽^*)。dom

第二种：使用js代码来动态进行设置布局

原理是经过一个数学逻辑来对图片进行计算，假设咱们须要把4张大小不一样的图片进行水平瀑布流对齐，咱们须要先计算好全部图片的高宽比，而后给一个统一的高度，根据这个统一的高度进行排序，咱们能够得到一个长方形，ui

这个长方形也是有宽高比的，咱们把它计算出来，而后将宽度调整为页面宽度，那么这个时候高度咱们自须要调整宽高比就能够肯定，根据这个调整好的高度，咱们再根据4张图片的宽高比，来获取这个时候的宽度，对图片进行排序便可。this

案例以下：spa

第一张图片：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>

<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>

</body>

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>

两种方式实现水平瀑布流布局

在实际开发中，常常会遇到图片排序处理的问题，进过屡次尝试，我在这里总结两种图片水平排序的方式：

以上是我总结出的两种方法，若是有更好的方法，欢迎你在评论进行补充ヾ(◍°∇°◍)ﾉﾞ。