黄山市网站建设,wordpress 随机图文,做电影网站用什么软件有哪些,什么是网络营销信息传递模型实现瀑布流 实现效果 有好几种方案 1.用column-count属性把页面元素分为俩列或多列来实现 2.用display flex 分列来展示页面 3.比如说用js实现 我今天介绍的就是第三种#xff0c;因为前两种都会有局限#xff0c;实现的效果我们希望是左右左右#xff0c;而不是分成两列去显…实现瀑布流 实现效果 有好几种方案 1.用column-count属性把页面元素分为俩列或多列来实现 2.用display flex 分列来展示页面 3.比如说用js实现 我今天介绍的就是第三种因为前两种都会有局限实现的效果我们希望是左右左右而不是分成两列去显示因为如果功能需要列表按照热度显示从我们视觉来看就是 左右比较好而不是一整列 1,2,3,4,5… 当然如果你们希望用column-count 实现的话也可以 请点击我随便找了一个网址网上有很多我自己也试过实现起来确实很简单纯css3实现。 那么好现在正式开始 说一下思路通过js控制两列数组分别在这两个数组中插入图片实现列表展示 首先HTML布局 view classpost-content wx:if{{list.length}}view classleft-viewrepeat for{{leftList}} keyindex indexindex itemitemPostItem :item.syncitem imgModewidthFix //repeat/viewview classright-viewrepeat for{{rightList}} keyindex indexindex itemitemPostItem :item.syncitem imgModewidthFix //repeat/view
/view 可以看到就是一个外部大壳子然后两列 left-view、right-view 之后就是两个数组循环展示PostItem是我自己封装的组件用来展示单个item css部分 .post-content {padding: 0 24rpx;padding-top: 24rpx;box-sizing: border-box; view {width: 49%;display: inline-block;vertical-align: top;}.left-view {margin-right: 2%;}
} 也很简单两列宽度约等于50%中间有间隔 js部分 loadImages () {setTimeout(() {const data this.listlet { leftList, rightList } thisif (data.length) {for (let i 0; i data.length; i) {if (data[i].id % 2 1) {leftList.push(data[i])} else {rightList.push(data[i])}}this.leftList leftListthis.rightList rightListthis.$apply()}}, 1000);
}data {leftList: [], //左列rightList: [], //右列
} 就可以看到下列图 但是如果只是这样实现的话就会有问题因为它的实现是按照奇偶数实现的那么如果有几张图片正好很高那么另外一列就会很难看。 下列有问题的情况 可以看到左列很难看 那么我做一下修改, 在遍历数据的时候做了左右列表的高度检测如果哪边低那么就append到哪边 loadImages (list) {const newList list || this.listsetTimeout(() {let { leftList, rightList } thisif (newList.length) {helper.forSetTimeout(newList,async (i) {const isLeft await this.isPushLeft()if (isLeft) {leftList.push(newList[i])} else {rightList.push(newList[i])}this.leftList leftListthis.rightList rightListthis.$apply()}, 50)}}, 300);
}// forSetTimeout 实现
function forSetTimeout (list, callback, time 1000) {for (let i 0; i list.length; i) {setTimeout(((num) {return callback.bind(null, num)})(i), i * time)}
}isPushLeft () {const query wepy.createSelectorQuery()query.select(.left-view).boundingClientRect()query.select(.right-view).boundingClientRect()return new Promise((resolve, reject) {query.exec((res) {const leftData res[0]const rightData res[1]resolve(leftData.height rightData.height)})})
} 最终效果如最上面的图事实上setTimeout的时间间隔可以改成30毫秒以内但是我觉得50毫秒已经不影响正常体验了。 转载于:https://www.cnblogs.com/kitebear/p/10550588.html
