html木桶布局,木桶布局 实现

百度图片

图片来自 百度图片

像这样高度一样，而宽度不同的布局方式称之为木桶布局。它有几个鲜明的特点： 每行的图片高度一致；每行的图片都是占满的。

如何实现木桶布局 之 整体思路

我们需要先拥有一些素材(图片)， 并且将这些图片横向摆放到页面上。假如我现在有100张图片，并且编号1~100， 它们的宽高都不是固定的。现在我们需要将图片都摆放到目标页面上。

首先，我们每行的高度是事先设定的，所以我们在把图片放入每一行(row)的时候，需要先调整图片的大小(等比例放大或缩小)使得图片的高度与行容器的高度一致 —— 即下图中的蓝色方框。

其中： 橙色方框代表图片(假设已和蓝色方框等高)， 黑色数字代表图片编号。

依次往行容器中放置等比例大小调整过的图片，①号图片，②号图片，...，一直到⑤号图片，发现⑤号图片它放不下了。这时候我们就需要把这个⑤号图片放到下一行的开头，并且再次调整图片大小，使得第一行中的①号-④号图片能够撑满第一行。该次调整主要是调整图片的高度，使得其宽度能够自适应撑满该行。

如果测量一下百度图片每行的高度就会发现： 每行高度基本相等，但有几像素的差距。

木桶布局原理

然后重复上述步骤，直至图片摆放完毕。

木桶布局代码实现 之 具体步骤

从HTML、CSS、JS部分依次实现。

大概有个结构，就是先有一个固定宽度的父容器，与若干个(数量未定的)行容器来盛放每行的图片数量，然后每行有若干个图片容器来盛放图片。

父子关系(父 > 子)： 固定宽度的父容器 (" .ct ") > 行容器(" .img-row ") > 图片容器(" .img-box ")

对应上图(木桶布局原理)为： 红色方框 > 蓝色方框 > 橙色方框

/* CSS */

/* 页面布局容器*/

.ct {

width: 1000px;

margin: 0 auto;

}

/* 图片容器 */

.img-box {

float: left;

}

/* 行容器 清楚子元素(图片容器)的浮动*/

.img-row::after {

content: "";

display: block;

clear: both;

}

JS代码

这里采用构造函数创建对象的方式来写这段代码，注意按照约定构造函数的首字母要大写。创建一个新对象，然后将构造函数的作用域赋给新对象，调用构造函数中的方法。

函数名声明为 Barrel ，意为木桶。然后就要确定有哪些属性和方法。在理解了思路步骤的前提下，可以构思需要哪些属性、方法以及它们的作用。

属性：

每行图片的高度固定： rowHeight, 行高

拥有一个固定的容器： DOM对象，一个容器 命名为 .ct。 还应该有行容器和图片容器，但是由于这两个容器内容数量不固定，所以在布局的时候再创建

行容器的宽度： width， 获取ct的宽度

存放每行图片的数组： imgArr[]。每次把加载的图片压入该数组，判断该行是否超出宽度。

方法：

拥有素材图片 ： 通过getImgUrls()方法来获取图片链接，(或从数据库中获取图片)。这里是通过访问https://placeholder.com/ 网站来获取代码，具体后述

加载图片信息： loadImg()方法来加载图片，以便获取图片信息，

渲染图片队列： render() 改变图片的比例大小，计算一行可以放置多少个图片

放置图片位置： layout() 将改变完大小的图片放置到页面上，append到对应的DOM元素节点上。具体关系对应前面的父子关系即可

初步的代码结构就如下所示：

function Barrel(ct, imgNum, height) {

this.ct = ct; // 木桶布局容器的DOM节点

this.width = parseInt(window.getComputedStyle(ct, null).getPropertyValue("width")); // 行宽，由于获取到的值是string: 1000px 所以转化为数值 1000

this.rowHeight = height; // 行高

this.imgArr = []; // 存放每行图片的数组

this.loadImg(imgNum);

}

Barrel.prototype = {

getImgUrls: function(){},

loadImg: function(){},

render: function(){},

layout: function(){}

}

方法实现：

getImgUrls()方法：首先可以访问该网站 ，可以获取到占位图片，可以看到获取占位图片的格式 ： http://via.placeholder.com/width x height /ffffff/00000/ , width与height分别代表图片的宽高，fffff是图片的背景颜色，000000是图片的文本颜色。

随机生成图片的大小(宽高限定一个范围)，背景颜色与文本颜色。这里添加一个参数，imgNum：确定需要图片的数量。最后返回包含这些图片链接的一个数组

getImgUrls: function(imgNum){

let imgUrls = [];

let colorArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; // 颜色数组[0-9, A-F]，

// 该颜色数组生成与源代码稍有不同，在我的GitHub上是用for循环生成的

for(let i = 0; i < imgNum; i++) {

let imgWidth = Math.floor(Math.random()*50+50); // 设定宽度50-100

let imgHeight = Math.floor(Math.random()*30+50); // 设定高度为30-80

let bgColor = textColor = ""; // 下面使用的是字符串拼接，每次使用都需要重新清空

for(let j=0; j < 6; j++){

bgColor += colorArr[Math.floor(Math.random()*16)];

textColor += colorArr[Math.floor(Math.random()*16)];

}

let url = "http://via.placeholder.com/" + imgWidth + "x" + imgHeight + "/" + bgColor + "/" + textColor;

imgUrls.push(url);

}

return imgUrls;

}

loadImg() 方法：用来加载图片，图片来源就从已有素材中寻找。即getImgUrls()

在这个方法中，需要做的就是获取图片信息(宽高，src等)并改变大小，高度与行高一致，宽度等比例改变。并且将信息存储起来，等每张图片加载完毕后就加入渲染排列图片的队列中。

loadImg: function(imgNum){

let imgUrlsArr = this.getImgUrls(imgNum);

let _this = this; // 保存this指针的指向，方便调用属性及方法

for(let i = 0; i < imgNum; i++){

let newImg = new Image(); // 新建图片对象

newImg.src = imgUrlsArr[i]; // 加载图片内容

newImg.onload = function(){

// Image对象加载了src后拥有宽高属性, imgInfo存储图片信息

let ratio = this.width / this.height;

let imgInfo = {

target: this, // 用来存放当前目标newImg,方便后续调用

height: _this.rowHeight,

width: ratio * _this.rowHeight, // 等比例缩放

ratio: ratio,

};

// 把加载完的图片加入渲染队列

_this.render(imgInfo);

}

}

},

render()方法：渲染队列的方法，主要是判断图片能否放在一行上(每次把图片加入到imgArr队列中就可判断长度)，并当图片符合占满一行的条件时，将最后一张图片放到下一行，并记录需要改变的图片比例交由layout()方法更改。

render: function(imgInfo){

// 定义该行图片宽度之和

let wholeWidth = 0;

this.imgArr.push(imgInfo);

for(let i = 0; i < this.imgArr.length; i++){

wholeWidth += this.imgArr[i].width;

}

// 如果该行加入的图片宽度大于了该行的宽度

// 就需要弹出最后一张图片，并更改前面的图片大小比例

if(wholeWidth > this.width){

let lastImg = this.imgArr.pop();

wholeWidth -= lastImg.width;

// 利用面积相等原则，来计算新的高度

let newHeight = this.width * this.rowHeight / wholeWidth;

this.layout(newHeight);

// 放置完毕之前的图片之后，清空该图片队列

// 并将上一行溢出的图片 作为下一行的第一张

this.imgArr = [];

this.imgArr.push(lastImg);

}

}

layout()方法：获得newHeight参数，是图片的新高度，改变该行图片的高度，使得这些图片自适应改变宽度之后能占满该行。也就是说这个木桶布局的高度会发生变化 与之前设定的this.rowHeight相近但不相等。

之后创建节点，并把修改好的图片依次加入到创建好的节点上，然后添加到页面中。

layout: function(newHeight){

// 一次只放一行， 所以只生成一个imgRow

let imgRow = document.createElement("div");

imgRow.classList.add("img-row");

// 一行包含若干个图片，所以需要若干个imgBox,并将图片加入其中

for(let i = 0; i < this.imgArr.length; i++){

let imgBox = document.createElement("div");

imgBox.classList.add("img-box");

let img = this.imgArr[i].target;

// 改变了高度之后宽度自己会跟着改变

img.style.height = newHeight + "px"; // 注意加"px"

imgBox.appendChild(img);

imgRow.appendChild(imgBox);

}

// 先把图片加载到图片盒子里，然后加到图片列中，最后加到容器中

this.ct.appendChild(imgRow);

}

最后便是两行代码来运行这段程序

let ct = document.querySelector(".ct");

let barrel = new Barrel(ct, 100, 100); // 100张图片数量， 指定每行的初始行高为100

效果预览及代码地址