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：用来设置多余网格的行高
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<style>
.masonry{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap:5px;
grid-auto-rows: 10px;
}
.item{
grid-row-start: auto;
}
</style>
</head>
<body>
<div class="masonry" id="app">
<img ref="imgs" class="item" :url="i.img" height="100%" width="100%" :key="i.id" v-for="i in data"/>
</div>
</body>
<script>
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')
</script>
</html>
PHP中使用ElasticSearch
琯琯关注赞赏支持
