本来想实现瀑布流布局的，弄了一晚上，都没搞明白哪里出问题了，才发现uni-app提供的image是个组件而不是标签，被坑死了,这才导致了方案一和方案二这种垂直水平的布局效果，想要实现瀑布流布局，应将image组件替换为img标签，（方案三）。（方案四：是使用JS实现瀑布流，详解）
方案一：column 多行布局实现垂直水平布局
只能实现同一高度对其，不能实现一高一矮的那种偏差对其效果。
<template>
<view class="container">
<view class="image-box" v-for="(item,index) in imageList" :key="index">
<image class="image" :src="item.imgUrl" mode="aspectFill"></image>
</view>
</view>
</template>
<script>
export default {
data () {
return {
imageList:[
{
imgUrl:require('../../static/images/img1.jpg')
},
{
imgUrl:require('../../static/images/img2.jpg')
},
{
imgUrl:require('../../static/images/img3.jpg')
},
{
imgUrl:require('../../static/images/img4.jpg')
},
{
imgUrl:require('../../static/images/img5.jpg')
},
{
imgUrl:require('../../static/images/img6.jpg')
},
{
imgUrl:require('../../static/images/img7.jpg')
},
{
imgUrl:require('../../static/images/img1.jpg')
},
{
imgUrl:require('../../static/images/img2.jpg')
},
{
imgUrl:require('../../static/images/img3.jpg')
},
{
imgUrl:require('../../static/images/img4.jpg')
},
{
imgUrl:require('../../static/images/img5.jpg')
},
{
imgUrl:require('../../static/images/img6.jpg')
},
{
imgUrl:require('../../static/images/img7.jpg')
},
{
imgUrl:require('../../static/images/img1.jpg')
},
{
imgUrl:require('../../static/images/img2.jpg')
},
{
imgUrl:require('../../static/images/img3.jpg')
},
{
imgUrl:require('../../static/images/img4.jpg')
},
{
imgUrl:require('../../static/images/img5.jpg')
},
{
imgUrl:require('../../static/images/img6.jpg')
},
{
imgUrl:require('../../static/images/img7.jpg')
},
{
imgUrl:require('../../static/images/img1.jpg')
},
{
imgUrl:require('../../static/images/img2.jpg')
},
{
imgUrl:require('../../static/images/img3.jpg')
},
{
imgUrl:require('../../static/images/img4.jpg')
},
{
imgUrl:require('../../static/images/img5.jpg')
},
{
imgUrl:require('../../static/images/img6.jpg')
},
{
imgUrl:require('../../static/images/img7.jpg')
},
{
imgUrl:require('../../static/images/img1.jpg')
},
{
imgUrl:require('../../static/images/img2.jpg')
},
{
imgUrl:require('../../static/images/img3.jpg')
},
{
imgUrl:require('../../static/images/img4.jpg')
},
{
imgUrl:require('../../static/images/img5.jpg')
},
{
imgUrl:require('../../static/images/img6.jpg')
},
{
imgUrl:require('../../static/images/img7.jpg')
},
{
imgUrl:require('../../static/images/img1.jpg')
},
{
imgUrl:require('../../static/images/img2.jpg')
},
{
imgUrl:require('../../static/images/img3.jpg')
},
{
imgUrl:require('../../static/images/img4.jpg')
},
{
imgUrl:require('../../static/images/img5.jpg')
},
{
imgUrl:require('../../static/images/img6.jpg')
},
{
imgUrl:require('../../static/images/img7.jpg')
}
]
}
}
}
</script>
<style lang="scss" scoped>
.container {
margin: 10upx;
column-count: 3; /*分多少列*/
column-gap: 10upx; /*列于列之间的距离*/
.image-box {
margin-bottom: 10upx;
height: 300upx; /*图片盒子固定高度*/
.image{
width: 100%;
height:100%; /* 我的图片是220x300px */
}
}
}
</style>
方案二：万能的flex 弹性布局实现垂直水平布局
不过也只能实现同一高度对齐的效果。
每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 10upx)。分成等宽的 3 列减掉左右两遍的 margin 距离。
HTML代码无更改，修改样式即可。
<style lang="scss" scoped>
.container {
display: flex;
flex-wrap: wrap;
// height: 100vh;
height: 100%;
.image-box {
margin: 10upx;
height: 320upx;
width: calc(100%/3 - 20upx);/*分成等宽的3列减掉左右两遍的margin距离。*/
.image {
width: 100%;
height: 100%;
}
}
}
</style>
效果图：
方案三：column多行布局实现瀑布流布局
首先采用统一宽度的图片，高度不限制。
以iphone6为标准，整个屏幕是750upx,我们要分成三列，也就是每列250upx，又因为多出3个列间距，所以还要减去三个列间距（我这里列间距是10upx）,所以每张图片的宽度应该为240upx。
<template>
<view class="container">
<view class="image-box" v-for="(item,index) in imageList" :key="index">
<img class="image" :src="item.imgUrl" alt="">
</view>
</view>
</template>
<script>
export default {
data() {
return {
imageList: [{
imgUrl: require('../../static/images/img1.jpg')
},
{
imgUrl: require('../../static/images/img3.jpg')
},
{
imgUrl: require('../../static/images/img13.jpg')
},
{
imgUrl: require('../../static/images/img4.jpg')
},
{
imgUrl: require('../../static/images/img5.jpg')
},
{
imgUrl: require('../../static/images/img6.jpg')
},
{
imgUrl: require('../../static/images/img7.jpg')
},
{
imgUrl: require('../../static/images/img8.jpg')
},
{
imgUrl: require('../../static/images/img9.jpg')
},
{
imgUrl: require('../../static/images/img10.jpg')
},
{
imgUrl: require('../../static/images/img11.jpg')
},
{
imgUrl: require('../../static/images/img12.jpg')
},
{
imgUrl: require('../../static/images/img13.jpg')
},
{
imgUrl: require('../../static/images/img7.jpg')
},
{
imgUrl: require('../../static/images/img2.jpg')
},
{
imgUrl: require('../../static/images/img4.jpg')
},
{
imgUrl: require('../../static/images/img8.jpg')
},
{
imgUrl: require('../../static/images/img4.jpg')
},
{
imgUrl: require('../../static/images/img5.jpg')
},
{
imgUrl: require('../../static/images/img6.jpg')
},
{
imgUrl: require('../../static/images/img13.jpg')
},
{
imgUrl: require('../../static/images/img8.jpg')
},
{
imgUrl: require('../../static/images/img9.jpg')
},
{
imgUrl: require('../../static/images/img10.jpg')
},
{
imgUrl: require('../../static/images/img11.jpg')
},
{
imgUrl: require('../../static/images/img12.jpg')
},
{
imgUrl: require('../../static/images/img6.jpg')
},
{
imgUrl: require('../../static/images/img13.jpg')
},
{
imgUrl: require('../../static/images/img10.jpg')
},
{
imgUrl: require('../../static/images/img12.jpg')
},
{
imgUrl: require('../../static/images/img13.jpg')
},
{
imgUrl: require('../../static/images/img4.jpg')
},
{
imgUrl: require('../../static/images/img10.jpg')
},
{
imgUrl: require('../../static/images/img6.jpg')
},
{
imgUrl: require('../../static/images/img7.jpg')
},
{
imgUrl: require('../../static/images/img1.jpg')
},
{
imgUrl: require('../../static/images/img12.jpg')
},
{
imgUrl: require('../../static/images/img11.jpg')
},
{
imgUrl: require('../../static/images/img4.jpg')
},
{
imgUrl: require('../../static/images/img5.jpg')
},
{
imgUrl: require('../../static/images/img11.jpg')
},
{
imgUrl: require('../../static/images/img7.jpg')
}
]
}
}
}
</script>
<style lang="scss" scoped>
.container {
margin: 5upx;
column-count: 3;/*分多少列*/
column-gap: 10upx;/*列于列之间的距离*/
.image-box {
margin-bottom: 5upx;
width: 240upx; /* 750/3 - 3*10 */
.image {
width: 100%;
height: 100%;
}
}
}
</style>
方案四：使用js逻辑实现瀑布流布局
瀑布流布局的最大特点就是每个板块都等宽不等高。
HTML框架部分：
<template>
<view id="container">
<view class="float-box" v-for="(item,index) in imageList" :key="index">
<view class="image-box">
<img class="image" :src="item.imgUrl" alt="">
</view>
</view>
</view>
</template>
container样式是我们的最外围的大容器，也叫大盒子,这个不用解释。
float-box样式，是我们的浮动盒子，他是用来控制调整我们的边距空白距离。
image-box样式用来修饰图片的边框、阴影。
图片数据导入：
data() {
return {
imageList: [{
imgUrl: require('../../static/images/img1.jpg')
},
{
imgUrl: require('../../static/images/img3.jpg')
},
{
imgUrl: require('../../static/images/img13.jpg')
},
{
imgUrl: require('../../static/images/img4.jpg')
},
{
imgUrl: require('../../static/images/img5.jpg')
},
//........图片过多，不一一在这里展示了,大家按照这个模板加图片就好
]
}
}
scss样式布局部分:
首先需要给大盒子container一个相对定位，因为其他板块都是相对于他来进行布局的，而其他板块（照片）采用绝对定位（这一部分在JS逻辑立马实现）。
给float-box盒子设定边距，让板块（照片）之间都相互拉开一些距离。
有因为view标签相当于div标签，是独占一行展示，需要使用float浮动让他们在一行上显示。
image-box盒子进行图片描绘、填充、边框、阴影、圆角。
<style lang="scss" scoped>
#container {
position: relative;
.float-box {
float: left;
padding: 15upx 0 0 15upx;
.image-box {
padding: 10upx;
border: 1upx solid #ccc;
box-shadow: 0 0 5upx #ccc;
border-radius: 5upx;
.image {
width: 165upx;
height: auto;
}
}
}
}
</style>
现在我们来看一下基本的呈现效果。
我们会看到板块参差不等的排布，接下来我们就需要JS去操作了。
网友评论