详解瀑布流布局的5种实现方式及object-fit
最近项目中须要处理与图片相关的布局，不得不说图片这玩意真想要获得完美的展现效果还真是要费些力气。由于图片的尺寸或者比例各不相同。因此想要不一样尺寸的图片有好的显示效果，你就须要找到适合的方式。css
并且图片每每是不可或缺元素。毕竟一图胜千言，有时候图片能给带来很是好的效果。前端
好比咱们天天都会使用的表情包，它每每可以表达出咱们没法用文字描述的信息，还好比咱们常常在公众号里看到的漫画虽然短短几个字，可是却可以让咱们看的不亦乐乎。vue
固然若是咱们作图片网站的，那图片的处理就是绕不开的话题了。因对图片的处理经验很少，因此就边学边用。今天就把最近学习与图片相关的知识整理出来。css3
好比单个图片如何更好的展现，瀑布流布局都有哪些你不知道的实现方式。git
接下来咱们就直接进入正题，咱们先从单张图片的展现提及。github
设置宽或高 100%
由于图片其自己的独特性：浏览器
- 不设置宽高的状况下会按原有的尺寸显示在网页中。即有多大，显示多大。
- 在非等比缩放的状况下会被拉伸变形。
- 设置宽度或者高度时，会保持原宽高比进行缩放。
<style lang="scss" scoped>
.box1 {
width: 150px;
height: 150px;
border: 2px solid red;
}
.box2 {
width: 150px;
height: 100px;
border: 2px solid red;
img {
display: block;
width: 100%;
height: 100%;
}
}
</style>
复制代码
显然当咱们采用 一、2 种方式的时候破坏性很强，没法应用到实际的项目中去。app
因此每每咱们会在项目中使用第 3 种方式，即设置高度或者宽度。它会保持原有比例进行缩放。wordpress
<style lang="scss" scoped>
.box {
width: 150px;
height: 150px;
border: 2px solid red;
}
.img1 {
width: 100%;
}
.img2 {
height: 100%;
}
</style>
复制代码
可是问题又来了，图片要么超出容器，要么就会留有空白，除非容器的宽高比刚好等于图片的宽高比时，才会彻底贴合。布局
对于超出容器的图片咱们可使用 overflow: hidden 把超出部分隐藏。图片获得了好的展现效果。但相应的咱们也损失了图片的一部分可视区域。
因此这个时候就须要你根据需求进行取舍了，究竟是选择隐藏图片的一部分，仍是留有空白。有的小伙伴会说，咱们产品说了，图片变形没问题，你就给我充满容器就好了。好吧....
即便如此，你也要把这篇文章好好读一读，由于需求是变幻无穷的，保不齐哪一天就须要了。
又有小伙伴说，这 2 种都不符合咱们的产品需求怎么办，还有其余的方式吗？答案是必须的，一块儿来看。
object-fit
CSS3 的 object-fit 属性是用来指定「可替换元素」的内容是如何适应到容器中的。它的值有 5 种。分别为：fill | contain | cover | none | scale-down。先看下效果在来一一解释它们到底都是什么意思。
<template>
<div class="box">
<img src="https://picsum.photos/id/1027/200/300"/>
</div>
</template>
<style lang="scss" scoped>
.box {
width: 150px;
height: 150px;
border: 2px solid red;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
</style>
复制代码
看到上面的显示效果，理解起来并不难了。
- fill：会充满整个容器，不考虑宽高比，因此会被拉伸变形。
- contain：会缩放到容器内，保持宽高比。
- cover：会保持比例进行缩放，内容的尺寸必定会大于等于容器，而后进行裁剪。
- none：保持图片的原始尺寸。
而 scale-down 有两种表现方式因此咱们单独来看。
- scale-down：会在 none 或 contain 中选择一个，原则是：当容器小时，它的表现和 contain 同样；当图片小时，它的表现和 none 同样。即谁小选择谁。
到这里不知道有没有小伙伴和我同样，在看到图片的不一样表现时，我特地去浏览器查看了下 <img>的真实尺寸，发现依然是 width: 100%;height: 100%; 是充满整个容器的。
但为何内容显示却有不一样的效果呢，这让我产生了疑惑。本着发现探索的精神，就去寻找答案了。
W3c 是这么描述的：<img> 标签建立的是被引用图像的占位空间。
而张鑫旭大大在半深刻理解CSS3 object-position/object-fit属性一文中也指出：
<img>元素其实与内容是相互独立的。<img>至关于一个外壳包裹着内容。你控制的只是<img> 元素的尺寸。而内容的尺寸则由 object-fit 属性控制。
综上索述，<img> 是一个空间占位符，并不控制内容。原来如此。感受本身又进步了。每一次的探索，都会发现新的东西，这种感受很奇妙。特别是还把它整理出文章，提供你们学习，感受牛逼哄哄带闪电。
知道了这些以后咱们操控图片时更加的驾轻就熟一些。那会了这些就结束了吗？不不不，这才是刚刚开始，精彩的还在后面。后面的布局才更加精彩。
多图片的布局
上面一直在说的都单张图片的显示。只要咱们把图片用合适的方式放进容器便可。若是是图片列表呢？或者专门展现图片的网站会有大量的图片并且尺寸和比例千奇百怪，各不相同。
假设要想实现一个图片画廊效果，首先咱们给图片一个 float: left，可是因为图片的尺寸不同，致使每一个图片的高度不一样，下一行的图片就会卡住，致使布局错乱。
此时你不得不给容器设置高度，让图片可以底部对齐，但在文章一开始咱们也提到了，这时候图片要么超出容器的高度，要么留有空白。
那若是使用 object-fit 属性按照业务需求去控制内容，貌似能够完成任务。
咱们把值设为 contain，布局是没有问题了，可是其实很不美观。若是设为 cover，若是图片过大不少内容都会丢失看不到。 怎么办？有什么解决办法？这时候就是瀑布流布局的优点了。
瀑布流布局即不会出现错乱现象，并且会最大限度显示图片的内容。因此是众多图片网站选择的布局方式。
而瀑布流布局目前有两种形式：一是等宽型，二是等高型。咱们先来讲说等宽型。
等宽瀑布流
看到上面你实现的思路是什么？能够思考几秒，接下来一块儿来看这些实现方式中有没有和你一思路同样的。
思路1. JS 计算列数
关键思路：
- 首先设置列宽度，而后计算可以展现的列数。
- 向每一列中添加图片。
关键代码：
<script>
export default {
methods: {
//计算图片列数
getColNumbers() {
let clientWidth = this.$refs.waterfall.clientWidth
this.colNumbers = Math.floor(clientWidth / this.colWidth)
},
//读取图片
loadImage() {
this.getColNumbers()
for (let i = 0; i < 17; i++) {
let colIndex = i % this.colNumbers
let url = require(`@/assets/images/${i}.jpg`)
if (this.imgList[colIndex]) {
this.imgList[colIndex].push(url)
} else {
this.$set(this.imgList, colIndex, [url])
}
}
},
}
}
</script>
复制代码
优点：思路清晰简单，不须要作过多的计算，只要计算须要显示的列数而后添加图片便可。
劣势：每列的末尾可能不够友好，可能出现有些列会很长，有些又会很短。
思路2. 利用绝对定位
关键思路：
- 首先设置列宽度，而后计算可以展现的列数。
- 把图片设置为绝对定位，而后计算出每一个图片的top，left值。
- 先把第一行图片排好，top 为 0，left 为 列的索引*列宽。
- 从第二行开始，每张图片都放到最短的一列下面。而后增长此列高度，此时列的高度发生变化，下张图片又会寻找其余最短的列。以此持续计算下去。
关键代码：
<script>
export default {
methods: {
//计算图片列数
getColNumbers() {
let clientWidth = this.$refs.waterfall.clientWidth
this.colNumbers = Math.floor(clientWidth / this.colWidth)
},
//读取图片
loadImage() {
this.getColNumbers()
for (let i = 0; i < 17; i++) {
let image = new Image()
let url = require(`@/assets/images/${i}.jpg`)
image.src = url
image.onload = () => {
this.render({
index: i,
url: url,
ratio: image.width / image.height
})
}
}
},
render(imgInfo) {
let colIndex = imgInfo.index % this.colNumbers
imgInfo.left = colIndex * this.colWidth
//首行 top为 0，记录每列的高度
if (imgInfo.index < this.colNumbers) {
imgInfo.top = 0
this.colHeight[colIndex] = this.colWidth / imgInfo.ratio
} else {
//获取高度的最小值
let minHeight = Math.min.apply(null, this.colHeight)
let minIndex = this.colHeight.indexOf(minHeight)
//此图片的 top 为上面图片的高度，left 相等
imgInfo.top = minHeight
imgInfo.left = minIndex * this.colWidth
//把高度加上去
this.colHeight[minIndex] += this.colWidth / imgInfo.ratio
}
this.imgList.push(imgInfo)
}
}
}
</script>
复制代码
优点：由于每次追加的图片都是最短列，因此末尾的展现会比思路 1 中要友好不少。
劣势：没渲染一张都会计算一次 top，left 值。并且图片的顺序是打乱的。
思路3. CSS3 column 属性
关键思路：
- column-count：指定列数
- column-gap: 设置列之间的间距
关键代码：
<template>
<div class="waterfall-width-column">
<div class="image-box" v-for="img in imgList" :key="img">
<img :src="img" alt="" />
</div>
</div>
</template>
<style lang="scss" scoped>
.waterfall-width-column {
column-count: 3;
column-gap: 10px;
.image-box {
img {
display: block;
width: 100%;
}
}
}
</style>
复制代码
优点：更加简单，不用额外计算，直接使用CSS渲染高效。
劣势：图片的顺序是从上向下排列的，这个要看业务需求允不容许了。另外列数固定。
不过你能够尝试经过媒体查询设置不一样列数
@media (min-width: 768px) {
.waterfall-width-column {
column-count: 3;
}
}
@media (min-width: 992px) {
.waterfall-width-column {
column-count: 4;
}
}
@media (min-width: 1200px) {
.waterfall-width-column {
column-count: 6;
}
}
复制代码
等高瀑布流
说完了等宽型接下来咱们来讲说等高型。
思路1. JS计算缩放
- 首先给定一个基准高度
- 图片获取基准高度下的宽度，而后计算每一行可以放入多少张
- 此时每一行图片确定会小于容器宽度，而后这一行进行缩放到容器大小。在从新计算放大后的高度。
关键代码：
<script>
export default {
data() {
return {
baseHeight: 200, //图片的基础计算高度
imgList: [[]], //用二维数据保存每一行数据
rowWidth: 0, //每行的图片宽度
rowCount: 0 //每行的索引
}
},
methods: {
loadImage() {
for (let i = 0; i < 17; i++) {
let image = new Image()
let url = require(`@/assets/images/${i}.jpg`)
image.src = url
image.onload = () => {
this.compare({
url: url,
width: this.baseHeight * (image.width / image.height),
height: this.baseHeight
})
}
}
},
//缩放后的总图片宽度与屏幕宽度比较
compare(image) {
//容器宽度
let clientWidth = this.$refs.waterfall.clientWidth
//计算每行宽度
this.rowWidth += image.width
//若是宽度大于容器宽度，去掉多余的宽度，总体进行缩放适应容器让右边对齐
if (this.rowWidth > clientWidth) {
//减去每一个css padding边距
clientWidth = clientWidth - this.imgList[this.rowCount].length * 10
this.rowWidth = this.rowWidth - image.width
//把高度调整为放大后的
let growAfterHeight = (clientWidth * this.baseHeight) / this.rowWidth
this.imgList[this.rowCount].forEach(item => {
item.height = growAfterHeight
})
//把多余图片放入到下一行
this.rowWidth = image.width
this.rowCount++
this.$set(this.imgList, this.rowCount, [image])
} else {
this.imgList[this.rowCount].push(image)
}
}
}
}
</script>
复制代码
优点：图片的内容获得所有展现，不会被隐藏。
劣势：须要反复计算以及缩放。
思路2. Flex布局
- 首先给图片一个固定高度，而后利用flex-grow的比例分配的特性
- 给图片设定object-fit属性让其保持比例充满容器
<template>
<div class="waterfall-height-css">
<div class="image-box" v-for="img in imgList" :key="img.url">
<img :src="img.url" />
</div>
</div>
</template>
<script>
<style lang="scss" scoped>
.waterfall-height-css {
display: flex;
flex-wrap: wrap;
.image-box {
flex-grow: 1;
}
img {
display: block;
min-width: 100%;
height: 200px;
object-fit: cover;
}
}
</style>
复制代码
此时你会发现，每一行的图片都获得了很好的显示效果。可是惟独最后一行会出现一个小小的问题。
想象一下，假如最后一行只有一张图片的话，他会被缩放到充满一行，致使图片只会显示很是小的一部份内容。
因此，咱们最后一行的图片不进行缩放处理便可。只须要添加如下css属性便可。
<style lang="scss" scoped>
.waterfall-height-css {
&:after {
content: '';
display: block;
flex-grow: 99999;
}
}
</style>
复制代码
由于flex-grow: 99999的值很是大，因此会把最后一行的剩余空间几乎所有占用，致使图片分配不了，只会按照原尺寸显示，就不会缩放占满一行啦。
优点：css 设置简单，渲染高效。
劣势：会损失图片的一部分可见区域。
到此，咱们介绍了图片的显示特性以及如何利用 object-fit 进行内容的控制。
对于多图片的布局，要想比较合理的显示图片，瀑布流布局是很是好的选择，固然若是业务需求对图片的展现友好度及美观度不作要求，你大可利用 object-fit 控制内容便可。
可是我认为瀑布流布局也是咱们应该掌握的内容之一，即使此时用不到，也能够先把文章收藏起来，以备不时之需，文中采用了多种方式的实现，你能够选择一种最贴合你需求的方式。
固然，案例中其实还有不少细节没有处理，好比浏览器窗口发上变化时从新加载图片会发生闪动该如何优化体验？小伙伴们不妨本身去尝试进行优化。动手实践是掌握技能的重要手段。
文中全部案例的代码地址：gitHub地址
2T技术资源免费送，包括不限于：前端、Python、Java、Android、产品等等。公众号后台回复「1024」，便可免费获取！
公众号：六小登登，更多干货文章，后台回复「加群」带你进入优质交流群。
- 1. 详解瀑布流布局的5种实现方式及object-fit
- 2. 瀑布流布局详解
- 3. 瀑布流布局实现的三种方式
- 4. 实现瀑布流布局
- 5. 瀑布流的一种实现方式
- 6. 3种方式实现瀑布流布局
- 7. 两种方式实现水平瀑布流布局
- 8. 纯CSS实现瀑布流布局的两种方案
- 9. css布局-瀑布流的实现
- 10. RecyclerView及瀑布流布局
- 更多相关文章...
- • ASP.NET MVC - 样式和布局 - ASP.NET 教程
- • ASP.NET Web Pages - 页面布局 - ASP.NET 教程
- • 常用的分布式事务解决方案
- • JDK13 GA发布：5大特性解读
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 详解瀑布流布局的5种实现方式及object-fit
- 2. 瀑布流布局详解
- 3. 瀑布流布局实现的三种方式
- 4. 实现瀑布流布局
- 5. 瀑布流的一种实现方式
- 6. 3种方式实现瀑布流布局
- 7. 两种方式实现水平瀑布流布局
- 8. 纯CSS实现瀑布流布局的两种方案
- 9. css布局-瀑布流的实现
- 10. RecyclerView及瀑布流布局