小程序瀑布流（小程序中瀑布流的实现）

瀑布流是一种非常常见的网页布局。 从视觉上看，这会导致多列布局不均匀。 这是目前非常流行的布局格式。 我最近在编写一个小程序时偶然发现了这一点，并想到了几种不同的方法来实现它。 接下来我们来看一个具体的实现方法（方法中使用的示例均为两列布局）。

等高瀑布流

等高瀑布流，顾名思义，就是瀑布流中的每个盒子的高度相同。 这种瀑布流形式对盒子高度没有要求，所以比较容易实现。 计算示例：

Page({ data: { list: [] }, onLoad () { let images = [] for (let i = 0 ; i

.fall {显示：flex; flex-wrap: 背景-颜色：#f7f7f7;}.fall-item { 宽度：330rpx; 330rpx; margin-top: 30rpx; margin-color: aquamarine;}

为了方便起见，本示例没有直接使用 flex 布局，实现如下。通过允许换行并设置瀑布流中每个框的宽度和高度，两列瀑布流很容易
不等高的瀑布流
不等高的瀑布流是一种更通用的形式，因为它。涉及到计算列的高度。每个盒子都有相同的高度，所以我们需要记录并比较每一列的列高度，下一个盒子将插入到高度最低的列中。现在让我们看一个瀑布。具有不同的高度。如何实现交叉流
已知盒子高度
通常，所有图像都以瀑布流的形式显示。  在这种情况下，服务器会返回要显示的图像的宽度和高度给前端。  这种情况比较简单，因为服务器返回图像的宽度和高度，前端只需要计算列高并在短列中插入下一张图像即可。  示例： 
   .fall { 显示：flex 背景-颜色：#f7f7f7;}.fall-column; {显示：flex-方向：列；边距-左：30rpx；}.fall-列-项目{宽度：330rpx；边距-顶部：30rpx； : 海蓝宝石;}页面({ 数据: { 图片: [{ 宽度: 360, 高度: 540 }, { 宽度: 480, 高度: 540 }, { 宽度: 540, 高度: 720 }, { 宽度: 7 20, 高度: 960 }, { 宽度: 540, 高度: 960 }, { 宽度: 360, 高度: 720 }, { 宽度: 360, 高度: 960 }, { 宽度: 540, 高度: 540 }, { 宽度: 540, 高度: 1440 }, { 宽度: 960, 高度: 1440 }], heightArr: [], 列表: [], col: 2 }, onLoad () { this.initData( 2) }, initData (col) { letimages = [] letscale = 2 // 模拟图像的宽度和高度 (let i = 0; i 
 ​​上例中，颜色块就是图像，为了方便起见， js中也是模拟的，确定了10张图片的宽高，每次随机选择10张图片，定义2列，每次计算每列的高度，将图片插入到一个短列中。然后我们用一个高度数组来记录图像的高度，实现起来也很简单
如果不知道盒子的高度
如果。你不知道盒子的高度？
wx.getImageInfo
第一种方法是通过wx.getImageInfo获取图像的宽度和高度信息示例：
     .fall { 显示：flex;背景-颜色：#f7f7f7;}.fall-列{显示：flex；flex-方向：列；margin-left：30rpx；}.fall-column-item { margin-top：30rpx；row-height：0；}    fall-column-item-img { width: 330rpx;}从 '../../api/index'Page 导入 api({ data: { list: [], heightArr: [] }, async onLoad () { let {results} = wait api.fetchImages() letcol = 2 for (let i in results) { results[i].cover = results[i].imageUrl // 获取图片信息 let info = wait this .loadImage(results[i].cover) results[i].height = 165 / info.width * info.height if (i { wx.getImageInfo({ src: cover, success: (res) => {solve( res ）这是专门用另一层 Promise 密封的，只是为了在获取下一张图像之前加载一张图像，但如果图像相对较大，我会进行额外的处理。下载时间很长，导致长时间白屏。  

这是因为wx.getImageInfo()在获取图像信息时，会先下载图像，然后再获取图像信息。   。  这会花费很长时间，但如果不需要图像加载序列，可以考虑直接并行加载它们。  在加载上一张图片之前加载下一张图片将使其显示速度更快。  
优化wx.getImageInfo
由于图像需要时间来加载和检索信息，因此请使用默认图像，以便用户可以看到他们最初看到的内容。  一旦检索到图像信息，就会显示该图像。  示例： 
     .fall { 显示：flex 背景-颜色：#f7f7f7; }。    fall-column {显示：flex；flex-方向：column；margin-left：30rpx；}.fall-column-item {位置：相对；margin-top：30rpx；行-高度：0；背景-颜色：#ccc；}.fall-列-项目：：{内容：'加载'之后；位置：绝对：50％； %。  翻译：translate(-50%, -50%); 显示：内联-块颜色：#666;}.fall-column-item-img { 位置: 相对; 宽度: 330rpx; z-index: 1;}从 '../../api/index'Page({ data: { list: [], heightArr: [] }, async onLoad () { let {results} = wait api.fetchImages() letcol = 2 for (let i = 0; i { wx.getImageInfo({ src: cover, success: ( res )=> 提供了一个简单的优化思路，实际的加载过渡动画会进一步设计微妙
 云存储检索用户信息
 一般小程序中使用的图片都存储在云端？x-oss图片链接中的[k3，以阿里云为例]process=image/info 获取图片信息示例：
    .fall { 显示：flex 背景- 颜色：#f7f7f7 }.fall- 列{ 显示：f雷克斯。   flex- 方向：列；margin-left：30rpx；}.fall-column-item {位置：相对；margin-top：30rpx；row-height：0； k3]颜色：#ccc;}.fall-Column-Item::after {内容：'加载'；顶部：50%；  翻译:translate([ k3]50%, -50%); 显示: inline-block color: #666;}.fall-column-item-img {position:relative; width: 330rpx; z -index: 1;}let fetchPicInfo = async (url) => { let [err, result] = wait to(testFly.get(`${url}?x-oss[k3 ]process=image) / info`)) if (err) throw err return result.data}从 '../../api/index'Page({ data: { list: [], heightArr: [] }, async onLoad ( ) { let {results} = wait api.fetchImages() letcol = 2 for (let i = 0; i 
这个方法非常有用。减少图像加载时间。  无需将图片下载到本地即可检索图片信息。  相反，它直接从服务器请求图像信息。  另外，由于每次请求只返回少量的基本图像信息字段，因此请求时间也很短。    ，如图所示：

这样，用户可以更快地看到图像显示，并在图像加载时添加过渡效果，提高体验。  
概述
这篇文章详细总结了我最近在编写小程序时遇到的瀑布流。  根据情况选择不同的装载方案。  当然，最好的体验是直接从服务器返回图像信息。  这节省了大量检索图像信息的时间，提高了用户体验。  我希望您发现它在编写小型瀑布程序时很有用。    
如有错误或不准确之处，敬请批评指正。  喜欢的话请点赞
推荐教程：微信小程序》
PHP 快速学习视频免费教程（入门到精通） 
如何学习 PHP？ 我应该从哪里学习 PHP？ 不用担心。 这里有简单的 PHP 学习教程（从初学者到专家）。  您可以保存并下载您想学习的朋友。    
 下载
			


    			
这几篇文章你可能也喜欢：
                 

                                            
如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
                                            
如何获取小程序的unionid（如何获取小程序的页面路径）
                                            
生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
                                            
什么是小程序？    有哪些功能？（什么是小程序？有哪些功能？）
                                            
介绍如何用小程序生成参数二维码（二维码+小程序参数）
                                        
                        

                        本文由主机参考刊发，转载请注明：小程序瀑布流（小程序中瀑布流的实现） https://zhujicankao.com/123786.html