cdn如何做网站统计,一个网站怎么做聚合,wordpress nextgen-gallery,网站之家百度图片图片来自 百度图片像这样高度一样#xff0c;而宽度不同的布局方式称之为木桶布局。它有几个鲜明的特点#xff1a; 每行的图片高度一致#xff1b;每行的图片都是占满的。如何实现木桶布局 之 整体思路我们需要先拥有一些素材(图片)#xff0c; 并且将这些图片横向…百度图片图片来自 百度图片像这样高度一样而宽度不同的布局方式称之为木桶布局。它有几个鲜明的特点 每行的图片高度一致每行的图片都是占满的。如何实现木桶布局 之 整体思路我们需要先拥有一些素材(图片) 并且将这些图片横向摆放到页面上。假如我现在有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 所以转化为数值 1000this.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()*5050); // 设定宽度50-100let imgHeight Math.floor(Math.random()*3050); // 设定高度为30-80let bgColor textColor ; // 下面使用的是字符串拼接每次使用都需要重新清空for(let j0; 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){// 一次只放一行 所以只生成一个imgRowlet 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; // 注意加pximgBox.appendChild(img);imgRow.appendChild(imgBox);}// 先把图片加载到图片盒子里然后加到图片列中最后加到容器中this.ct.appendChild(imgRow);}最后便是两行代码来运行这段程序let ct document.querySelector(.ct);let barrel new Barrel(ct, 100, 100); // 100张图片数量 指定每行的初始行高为100效果预览及代码地址
