瀑布流布局的实现方式

要实现的效果如下图：

首先最容易想到的就是分两列，然后把内容添加进去就可以了。

<style>.container {display: flex;flex-direction: row;justify-content: space-between;padding: 12px;}.left {margin-right: 6px;flex: 1;}.right {margin-left: 6px;flex: 1;}
</style><div class="container"><div class="left"><div class="image-box"><img :src="img" alt="" /></div><div class="image-box"><img :src="img" alt="" /></div></div><div class="right"><div class="image-box"><img :src="img" alt="" /></div><div class="image-box"><img :src="img" alt="" /></div></div></div>

比较麻烦的就是API返回给我们的是一个列表，但是我们需要两个列表，需要JS进行拆分处理。

let left = []
let right = []
let data = [img1, img2, img3]
for (let i = 0; i < data.length; i++) {if (i % 2 === 0) {left.push(data[i])} else {right.push(data[i])}
}

优势：思路清晰简单，只需要更加列数然后添加图片即可，而且图片的顺序可以是从左往右。

也可以使用 CSS3 column 属性。

关键思路：

1、column-count：指定列数。3、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: 2;column-gap: 10px;.image-box {img {display: block;width: 100%;}}
}
</style>

更加简单，不用额外计算，直接使用CSS渲染高效。劣势：图片的顺序是从上向下排列的，这个要看业务需求允不允许了。

瀑布流布局的实现方式相关推荐

3种方式实现瀑布流布局
JS 实现瀑布流布局前言一.JS 实现瀑布流二.column 多行布局实现瀑布流三.flex 弹性布局实现瀑布流四.3种方式对比前言今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才 ...
html布局结构瀑布流,三种方式实现瀑布流布局
分别使用javascript,jquery,css实现瀑布流布局: 第一种方式:使用JavaScript: 瀑布流布局 *{padding:0;margin:0;} .clearfix:after, ...
浅析瀑布流布局原理及实现方式
一.瀑布流瀑布流布局有一个专业的英文名称Masonry Layouts.瀑布流布局已经有好多年的历史了,我最早知道这个名词的时候大约是在2012年,当时Pinterest网站的布局就是使用的这种流式 ...
html瀑布式原理,3种方式实现瀑布流布局小结
前言今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式. 一.JS 实现瀑布流思路分析 ...
【Android 应用开发】UI绘制流程 ( 生命周期机制 | 布局加载机制 | UI 绘制流程 | 布局测量 | 布局摆放 | 组件绘制 | 瀑布流布局案例 )
文章目录一. 博客相关资料及下载地址 1. 代码查看方法 ( ① 直接获取代码 | ② JAR 包替换 ) 2. 本博客涉及到的源码查看说明二. Activity 生命周期回调机制 1. An ...
RecyclerView控件实现横向滚动和瀑布流布局，以及RecyclerView的点击监听（项目已上传GitHub）
先附上我的GitHub项目地址: https://github.com/Skymqq/RecyclerViewTest.git 我们已经知道,ListView的拓展性不好,它只能实现纵向的滚动的效果, ...
使用jquery+css实现瀑布流布局
虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下: 思路是通过将每个小块的position设置为relativ ...
vue 实现瀑布流布局的组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐.琳琅满目.唯美的视觉效果,该布局随 ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...

瀑布流布局的实现方式

瀑布流布局的实现方式相关推荐

最新文章

热门文章