1. Grid布局是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
2. 为实现瀑布流先介绍以下几个属性:
display:设置为grid指明当前容器为Grid布局
grid-template-columns: 定义每一列的列宽
grid-template-rows: 定义每一行的行高
column-gap:用于设置列间距qi
其中 grid-template-columns和grid-template-rows,可以使用绝对单位,也可以使用百分比。并且为了表示比例关系,Grid布局提供了fr关键字,如果设置1fr和2fr,表示后者是前者的两倍。
3. 为实现瀑布流再介绍几个属性:
grid-row-start:上边框所在的水平网格线
grid-row-end:下边框所在的水平网格线
grid-column-start:左边框所在的垂直网格线
grid-column-end:右边框所在的垂直网格线
这4个属性可接收如下属性:
auto:表示自动放置
自定义名称:可以给予网格线一个名称,并在此处引用(本文并不涉及)
网格线索引: 代表第几条网格线(从1开始)
span + 数字 : 表示上下边框或左右边框跨越多少网格
那么什么是网格线呢?
划分网格的线,称为网格线。水平网格线划分出行,垂直网格线划分出列。
正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。
4. 介绍另一个属性:
grid-auto-rows:用来设置多余网格的行高
代码:
.masonry{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap:5px;
grid-auto-rows: 10px;
}
.item{
grid-row-start: auto;
}
var Main = {
mounted(){
Array.from(this.$refs.imgs).forEach(function(img,index){
let src = img.getAttribute('url');
let image = new Image();
image.src = src;
let width = img.width;
image.onload = function(){
let w = image.width;
let h = image.height;
let height = Math.round(h * width / w)
img.src = src;
img.style.gridRowEnd = `span ${~~(height/10)}`
}
})
},
data() {
return {
data:[]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
PHP中使用ElasticSearch
琯琯关注赞赏支持