不固定图片宽高瀑布流_类百度图片的固定高度横向瀑布流js方法及纯css实现的方法记录...
微信图片_20190117105118.png
纯css实现代码:
Document
div{
display: flex;/*显示模式设置为弹性盒子*/
flex-wrap: wrap;/*进行强制换行*/
}
div:after{
/*对最后一个伪元素进行最大限度伸缩*/
content: ' ';
flex-grow: 999999999999999999999999999999999999;
}
img{
height: 200px;/*高度*/
width: auto;
margin: 2px;
flex-grow: 1;/*进行按比例伸缩*/
object-fit: cover;/*进行裁切,并且图片按比例缩放*/
}
js实现代码及思路:
微信图片_20190117142317.png
原理是木桶原理,把图片放进一个div计算当前排的宽度,如果大于的话,把最后一个pop掉,同时layout当前排,循环下去
Document
html,
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.ct {
width: 90%;
margin: 0 auto;
}
/* 图片容器 */
.img-box {
float: left;
display: flex;
}
.imgSB {
margin-bottom: 5px;
overflow: hidden;
}
.imgS {
margin-right: 5px;
margin-bottom: 5px;
overflow: hidden;
}
.img-row{
display: flex;
flex-wrap: wrap;
}
.img-row .img-box:last-child{
flex:1;
}
/* 行容器 清楚子元素(图片容器)的浮动*/
.img-row::after {
content: "";
display: block;
clear: both;
}
var allImgUrl = [];
window.onload = function () {
let ct = document.querySelector(".ct");
let barrel = new Barrel(ct, 60, 200); // 100张图片数量, 指定每行的初始行高为100
}
var debounce = function (idle, action) {
var last
return function () {
var ctx = this,
args = arguments
clearTimeout(last)
last = setTimeout(function () {
action.apply(ctx, args)
}, idle)
}
}
window.onresize = debounce(100, function () {
let ct = document.querySelector(".ct");
ct.innerHTML = "";//删除子节点,resize的时候会比较烦,因为要先把之前的图片存好,删除子节点,然后执行重排..
let barrel = new Barrel(ct, 60, 200, 'resize'); // 100张图片数量, 指定每行的初始行高为100
})
function Barrel(ct, imgNum, height, type = 'new',ww=0) {
this.ct = ct; // 木桶布局容器的DOM节点
this.ww = ww;
this.type = type;
this.width = parseInt(window.getComputedStyle(ct, null).getPropertyValue("width")) - 20; // 行宽,预防滚动条出现预留20
console.log(this.width)
this.rowHeight = height; // 行高
this.imgArr = []; // 存放每行图片的数组
this.loadImg(imgNum);
}
Barrel.prototype = {
getImgUrls: function (imgNum) { //模拟后台获取的图片地址
console.log(this.type)
if (this.type !== 'resize') {
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() * 500 + 500); // 设定宽度500-1000
let imgHeight = Math.floor(Math.random() * 300 + 500); // 设定高度为300-800
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);
}
allImgUrl = imgUrls;
return imgUrls;
} else {
// console.log(allImgUrl)
return allImgUrl;
}
},
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]; // 加载图片内容
let ww = 0;
newImg.onload = function () {
// Image对象加载了src后拥有宽高属性, imgInfo存储图片信息
let ratio = this.width / this.height;
// console.log(ratio)
let imgInfo = {
target: this, // 用来存放当前目标newImg,方便后续调用
height: _this.rowHeight,
width: ratio * _this.rowHeight, // 等比例缩放
ratio: ratio,
};
// 把加载完的图片加入渲染队列
_this.render(imgInfo,i);
}
}
},
render: function (imgInfo,i) {
this.imgArr.push(imgInfo);
// let ww = 0;
this.ww += imgInfo.width //性能优化,利用总ww来执行直接加
if (this.ww > this.width) {
let lastImg = this.imgArr.pop();
this.ww -= lastImg.width;
// 利用面积相等原则,来计算新的高度
let newHeight = this.width * this.rowHeight / this.ww;
let newRatio = this.width/this.ww;
this.layout(newHeight,newRatio);
// 放置完毕之前的图片之后,清空该图片队列
// 并将上一行溢出的图片 作为下一行的第一张
this.imgArr = [];
this.imgArr.push(lastImg);
this.ww = lastImg.width;//重置ww,但是要等于pop掉的那张图的width
}
// 定义该行图片宽度之和
// let wholeWidth = 0;
// this.imgArr.push(imgInfo);
// let wholePadding = 0;
// for (let i = 0; i < this.imgArr.length; i++) {
// wholeWidth += this.imgArr[i].width;
// wholePadding += 10;
// }
// // 如果该行加入的图片宽度大于了该行的宽度
// // 就需要弹出最后一张图片,并更改前面的图片大小比例
// if (wholeWidth > this.width) {
// // console.log(this.imgArr)
// let lastImg = this.imgArr.pop();
// wholeWidth -= lastImg.width;
// // 利用面积相等原则,来计算新的高度
// let newHeight = this.width * this.rowHeight / wholeWidth;
// let newRatio = this.width/wholeWidth;
// console.log(newRatio)
// this.layout(newHeight,newRatio);
// // 放置完毕之前的图片之后,清空该图片队列
// // 并将上一行溢出的图片 作为下一行的第一张
// this.imgArr = [];
// this.imgArr.push(lastImg);
// }
},
layout: function (newHeight,newRatio) {
// 一次只放一行, 所以只生成一个imgRow
let imgRow = document.createElement("div"); //可以选择一排排layout
imgRow.classList.add("img-row");//可以选择一排排layout
// console.log(this.imgArr)
// 一行包含若干个图片,所以需要若干个imgBox,并将图片加入其中
for (let i = 0; i < this.imgArr.length; i++) {
let imgBox = document.createElement("div");
imgBox.classList.add("img-box");
let imgS = document.createElement("div");
if (i === this.imgArr.length - 1) {
imgS.classList.add("imgSB");
} else {
imgS.classList.add("imgS");
}
let img = this.imgArr[i].target;
// 改变了高度之后宽度自己会跟着改变
// console.log(newRatio,this.imgArr[i].width)
img.style.width =parseInt(newRatio*this.imgArr[i].width)-5+'px';// 注意加"px",减掉一个margin-right的值
// img.style.height = newHeight - 5 + "px"; // 注意加"px",减掉一个margin-right的值
imgS.appendChild(img);
imgBox.appendChild(imgS);
imgRow.appendChild(imgBox);
// this.ct.appendChild(imgBox);//也可以一个个插入,反正都是float
}
// 先把图片加载到图片盒子里,然后加到图片列中,最后加到容器中
this.ct.appendChild(imgRow);//可以选择一排排layout
},
}
不固定图片宽高瀑布流_类百度图片的固定高度横向瀑布流js方法及纯css实现的方法记录...相关推荐
- Flutter图片宽高获取
本地图片宽高获取 网络图片宽高获取 原理 通过在其ImageProvider上调用resolve来读取ImageStream 1.本地图片宽高获取 以IM发送本地图片为例 sendImage: (St ...
- android 通过图片url获取宽高_通过 URL 获取图片宽高优化
一张小图.png 前言 客户端研发时,有时会有这样的需求,需要根据图片链接地址获取图片的宽高来进行界面排版. 一般比较正规的做法,是服务端在返回数据时将图片的信息属性一起带回来,这也符合轻客户端设计规 ...
- vue移动端通过px动态计算图片宽高_vue图片宽高自适应_移动web图片高度自适应的解决方案...
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动 针对这个问题,有以下几种解决方案 ...
- css控制图片拉伸不变形,css+background实现 图片宽高自适应,拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
- 【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
这篇文章,主要介绍PDFBox操作PDF文档之添加本地图片.添加网络图片.图片宽高自适应.图片水平垂直居中对齐. 目录 一.PDFBox操作图片 1.1.添加本地图片 (1)案例代码 (2)运行效果 ...
- vue-preview动态获取图片宽高并增加旋转功能
vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意.但是缺少一个图片旋转功能. 安装使用 第一步:安装 npm i vue-p ...
- JS快速获取图片宽高的方法
JS快速获取图片宽高的方法 快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
- 20220209-CTF MISC -normal_png-stegsolve分析图片--Winhex修改图片宽高
攻防世界- MISC-进阶区-003-normal_png 下载附件: 首先Mac打不开: 换到kali 也无法打开: 于是我又换到windows(之前碰到过这种情况,图片只能在Windows环境下才 ...
- java解析webp格式图片宽高;java解析webp图片转png格式
java解析webp格式图片宽高:java解析webp图片转png格式 package 你的包名:***.***.***.***;import java.io.FileInputStream; imp ...
最新文章
- Java Eclipse解决中文字体太小
- c#中拖动图片的例子
- yaml语法--多行字符串可以使用|保留换行符,也可以使用>折叠换行
- controller通过map返回减少dto类的创建
- 【VMCloud云平台】SCOM配置(四)-监控应用可用性
- win7开机提示服务器正在运行,科技常识:win7电脑启动ie浏览器提示服务器正在运行的处理方法...
- Error Domain=NSCocoaErrorDomain Code=3840 JSON text did not start with array or object and option
- Android、Java泛型扫盲
- UVa 12657 双向链表
- 网易云音乐转码_网易云音乐产品分析报告
- TCP和UDP区别?如何改进TCP
- python老男孩14期_老男孩Python完美实战课程 14期视频教程 28周Python视频教程 1-14周部分...
- android开发,动态图标,Android动态更新APP图标
- UPnP 协议栈的威胁分析及防范方案
- 教程向|3D建模最难之面部雕刻,详细教程带给大家(下)
- iOS - 解决Warning: Attempt to present which is already presenting
- error: #79: expected a type specifier
- 计算机的基础知识(一)
- 一文看尽CES Asia:大变革下的汽车与全面AI化的智能家居
- idea分支合并到主干
热门文章
- linux无法连接邮件服务器,linux – 无法连接到SMTP服务器
- 2022黑龙江最新消防设施操作员模拟试题题库及答案
- 三十天学会绘画pdf_《30天学会绘画》我从零基础开始
- nyoj1170 最大的数
- 全球及中国运动饮料市场品牌营销状况与消费潜力预测报告2022-2028年
- php 扩展开发的好处,关于PHP扩展开发(收藏)
- 无人机/无人车仿真软件学习与实践---CoppeliaSim教程2---无人机的仿真与外部控制
- Golang 操作 Logger、Zap Logger 日志
- Springboot实现文件上传文件压缩和前端展示
- 阿里腾讯京东华为纷纷发力,互联网医疗究竟有何吸引力?