小程序瀑布流

超、凢脫俗 2022-03-15 06:28 227阅读 0赞

上个写的有潜在bug，这个是修复此bug的。

**思路：**

布局依然是两列col1，col2，利用image标签的bindload函数，监听图片加载完成事件，加载完成后，转化改图片宽高，并且判断应该放到col1里还是col2里。并分别记录col1和col2的高度，以便下次判断。

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

**html 部分：**

</block>

<scroll-view style="height:\{ \{scrollH\}\}rpx" class='scroll' bindscrolltolower="loadImages" scroll-y='true'>

</block>

</view>

</block>

</view>

</scroll-view>

**css部分：**

.scroll\{

width: 720rpx;

margin: 0 auto;

.col1\{

width: 350rpx;

float: left;

.col2\{

width: 350rpx;

float: left;

margin-left: 20rpx;

**js部分：**

// pages/waterfall/waterfall.js

var col1H = 0;

var col2H = 0;

var col1=\[\];

var col2=\[\];

Page(\{

/\*\*

\* 页面的初始数据

\*/

data: \{

imagesList:\[\],

scrollH:1500

\},

/\*\*

\* 生命周期函数--监听页面加载

\*/

onLoad: function (options) \{

this.loadImages();

\},

//图片宽高重置

reserveimg:function(e)\{

var that = this;

var index = e.currentTarget.dataset.index;

var imgw = e.detail.width;

var imgh = e.detail.height;

var width = 350;

var height = imgh \* width / imgw;

for (var i = 0; i < that.data.imagesList.length;i++)\{

if(i == index)\{

if (col1H <= col2H) \{

col1.push(\{

"pic": that.data.imagesList\[i\].pic,

"width": 350,

"height": height,

\});

col1H+=height;

\} else \{

col2.push(\{

"pic": that.data.imagesList\[i\].pic,

"width": 350,

"height": height,

\})

col2H += height;

that.setData(\{

col1:col1,

col2:col2

\})

console.info(index,col1,col2)

\},

//下拉加载

loadImages: function () \{

var that = this;

//模拟的加载本地图片数据

let images = \[

\{ pic: "../images2/1.png", height: 0 \},

\{ pic: "../images2/2.png", height: 0 \},

\{ pic: "../images2/3.png", height: 0 \},

\{ pic: "../images2/4.png", height: 0 \},

\{ pic: "../images2/5.png", height: 0 \},

\{ pic: "../images2/6.png", height: 0 \},

\{ pic: "../images2/7.png", height: 0 \},

\{ pic: "../images2/8.png", height: 0 \},

\{ pic: "../images2/9.png", height: 0 \},

\{ pic: "../images2/10.png", height: 0 \},

\{ pic: "../images2/11.png", height: 0 \},

\{ pic: "../images2/12.png", height: 0 \},

\{ pic: "../images2/13.png", height: 0 \},

\{ pic: "../images2/14.png", height: 0 \}

\];

var imagesList = that.data.imagesList;

for (var i = 0; i < images.length;i++)\{

images\[i\].id = i

var imagesArray = imagesList.concat(images)

this.setData(\{

imagesList: imagesArray

\});

\})

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: /images/20220315/232138be7372474082e3ce745a3a3098.png

小程序瀑布流

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关手写瀑布流—1.瀑布流介绍

相关写一个微信小程序瀑布流

相关微信小程序轮子 - 瀑布流布局+数据懒加载（可替换图片瀑布流懒加载 / 视频瀑布流懒加载等等）

相关 js 原生瀑布流布局，瀑布流布局

相关瀑布流

相关瀑布流

相关小程序瀑布流

相关小程序瀑布流

相关小程序瀑布流布局

相关 taro实现小程序端瀑布流