首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

web页面和微信小程序页面实现瀑布流效果

Posted in Javascript onSeptember 26, 2018

小程序实现瀑布流效果，和web页面差不多，都要经过以下步骤：

1)、加载图片，获取图片的宽高度；

2)、根据页面需要显示几列计算每列的宽度；

3)、根据图片真实宽度和每列的宽度比，计算出图片需要显示的高度；

4)、重新对图片进行定位

1、web页面瀑布流效果，先看效果图（瀑布流+无限滚动加载）：

web页面和微信小程序页面实现瀑布流效果

　页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
  <meta charset='utf-8′> <!--声明文档使用的字符编码-->
  <title>瀑布流_左浮动</title>
 <style type="text/css">
  *{margin:0;padding:0;}
  .container {
   width: 1200px; height: auto; margin: 50px auto;
   position: relative;
  }
  .box{
   padding: 5px; box-shadow: 0 0 10px purple; border-radius: 5px;
   float: left; margin: 10px;
  }
  .box img { width: 200px; height: auto; }
 </style>
</head>
<body>
 <div class="container">
  <div class="box"><img src="../img/0.jpg"/></div>
  <div class="box"><img src="../img/1.jpg"/></div>
  <div class="box"><img src="../img/2.jpg"/></div>
  <div class="box"><img src="../img/3.jpg"/></div>
  <div class="box"><img src="../img/4.jpg"/></div>
  <div class="box"><img src="../img/5.jpg"/></div>
  <div class="box"><img src="../img/6.jpg"/></div>
  <div class="box"><img src="../img/7.jpg"/></div>
  <div class="box"><img src="../img/8.jpg"/></div>
  <div class="box"><img src="../img/9.jpg"/></div>
  <div class="box"><img src="../img/10.jpg"/></div>
  <div class="box"><img src="../img/11.jpg"/></div>
  <div class="box"><img src="../img/12.jpg"/></div>
  <div class="box"><img src="../img/13.jpg"/></div>
  <div class="box"><img src="../img/14.jpg"/></div>
  <div class="box"><img src="../img/15.jpg"/></div>
  <div class="box"><img src="../img/16.jpg"/></div>
 </div>
 <script type="text/javascript">
  var boxsHeight = []; //盒子高度存储数组
  var boxWidth = 230, boxHeight = 230;
  window.onload = function(){
   var boxs = document.getElementsByClassName('box');
   var cols = Math.floor(1200.0/boxWidth); //最多几列
   //offsetWidth: 包括元素的内容宽度+padding+border宽度
   //存储第一行的每个盒子的高度到数组里面
   for (var i = 0; i < cols; i++){
    var obj = boxs[i]; //元素节点
    if (i < cols){
     boxsHeight.push(obj.offsetHeight);
    }
   }
   updateBoxFrame(cols); //从第二行开始更新元素的位置
   window.onscroll = pageScroll; //设置页面滚动监听函数
   pageScroll(); //先调用一次
  }
  //获取数组中最小值的索引
  function getMinHeightIndex(arr){
   var minHeight = Math.min.apply(null, arr);
   for (var i = 0; i < arr.length; i++){
    if (arr[i] == minHeight){
     return i;
    }
   }
  }
  //监听页面滚动
  function pageScroll(){
   var parentEle = document.getElementsByClassName('container')[0];
   var subEleCount = parentEle.childElementCount; //子元素个数
   var lastBox = parentEle.lastElementChild; //最后一个元素
   //判断是否滚动到底部
   var doc = document.documentElement||document.body;
   console.log('滚动监听', doc.scrollTop+",", lastBox.offsetTop+", " + doc.clientHeight);
   if (doc.scrollTop+doc.clientHeight > lastBox.offsetTop){
    //表示该新添加元素了
    addBox();
    //更新新添加元素的位置
    updateBoxFrame(subEleCount);
   }
  }
  //新添加子元素
  function addBox(){
   var parentEle = document.getElementsByClassName('container')[0];
   var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
   for (var i = 0; i < arr.length; i++){
    var index = parseInt(Math.random()*100%arr.length);
    var imgNum = arr[index];
    var div = document.createElement('div');
    div.setAttribute('class', 'box');
    div.innerHTML = '<img src="../img/' + imgNum + '.jpg"/>'
    parentEle.appendChild(div);
    arr.splice(index, 1)
   }
  }
  //更新新添加元素的位置
  function updateBoxFrame(startIndex){
   var boxs = document.getElementsByClassName('box');
   for (var i = startIndex; i < boxs.length; i++){
    var obj = boxs[i];
    //获取数组中最小高度的索引
    var minHeightIndex = getMinHeightIndex(boxsHeight);
//     console.log(boxsHeight);
//     console.log(minHeightIndex + ", " +boxsHeight[minHeightIndex]);
    var boxTop = boxsHeight[minHeightIndex] + 20;
    var boxLeft = minHeightIndex * boxWidth;
    console.log(i + ', boxTop: ' + boxTop + ", boxLeft: " + boxLeft);
    //设置元素的定位样式
    obj.style = 'position: absolute; top:' + boxTop + "px;left:" + boxLeft+"px";
    boxsHeight[minHeightIndex] = boxTop + obj.offsetHeight;
   }
  }
 </script>
</body>
</html>

2、小程序实现瀑布流，大致流程差不多。只不过小程序的图片的宽高度的获取没有web页面那么方便。

大概实现过程：1）、获取图片数据，页面渲染；

2）、给图片绑定加载load事件，存储每个图片的宽高度；

3）、计算每个图片的定位，重新渲染

先看小程序的效果图（瀑布流+无限循环加载）：

web页面和微信小程序页面实现瀑布流效果

wxml页面代码：

<scroll-view class='main' scroll-y='true' style="height:{{windowHeight}}px" bindscrolltolower='loadMoreImages'>
 <image wx:for='{{dataList}}' wx:key='item' src='{{item.src}}' style='position: absolute; top: {{item.top}}px; left: {{item.left}}px; width: {{imgWidth}}px; height: {{item.height}}px' bindload='loadImage' data-index='{{index}}' bindtap='previewImg'/>
</scroll-view>

js页面代码：

// pages/discover/waterfall_flow/waterfall_flow.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 dataList: [], //数据源
 windowWidth: 0, //页面视图宽度
 windowHeight: 0, //视图高度
 imgMargin: 6, //图片边距: 单位px
 imgWidth: 0, //图片宽度: 单位px
 topArr: [0, 0], //存储每列的累积top
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 wx.showLoading({
  title: '加载中...',
 })
 var that = this;
 //获取页面宽高度
 wx.getSystemInfo({
  success: function (res) {
  console.log(res)
  var windowWidth = res.windowWidth;
  var imgMargin = that.data.imgMargin;
  //两列，每列的图片宽度
  var imgWidth = (windowWidth - imgMargin * 3) / 2;
  that.setData({
   windowWidth: windowWidth,
   windowHeight: res.windowHeight,
   imgWidth: imgWidth
  }, function () {
   that.loadMoreImages(); //初始化数据
  });
  },
 })
 },
 //加载图片
 loadImage: function (e) {
 var index = e.currentTarget.dataset.index; //图片所在索引
 var imgW = e.detail.width, imgH = e.detail.height; //图片实际宽度和高度
 var imgWidth = this.data.imgWidth; //图片宽度
 var imgScaleH = imgWidth / imgW * imgH; //计算图片应该显示的高度
 var dataList = this.data.dataList;
 var margin = this.data.imgMargin; //图片间距
 //第一列的累积top，和第二列的累积top
 var firtColH = this.data.topArr[0], secondColH = this.data.topArr[1];
 var obj = dataList[index];
 obj.height = imgScaleH;
 if (firtColH < secondColH) { //表示新图片应该放到第一列
  obj.left = margin;
  obj.top = firtColH + margin;
  firtColH += margin + obj.height;
 }
 else { //放到第二列
  obj.left = margin * 2 + imgWidth;
  obj.top = secondColH + margin;
  secondColH += margin + obj.height;
 }
 this.setData({
  dataList: dataList,
  topArr: [firtColH, secondColH],
 });
 },
 //加载更多图片
 loadMoreImages: function () {
 var imgs = [
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1409185525,4059560780&fm=26&gp=0.jpg',
  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4076355782,2436939971&fm=15&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=777075993,2126273204&fm=11&gp=0.jpg',
  'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=57777155,3251523579&fm=11&gp=0.jpg',
  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3825727093,2830650732&fm=11&gp=0.jpg',
  'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2379065095,654347953&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2749679283,2472217536&fm=11&gp=0.jpg',
  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=677128138,409184861&fm=11&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1884091074,3049103326&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1600363417,3661952978&fm=11&gp=0.jpg',
  'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2069544162,3090555174&fm=11&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3328655038,3143543956&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3953624046,2332872335&fm=26&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=717009955,687560133&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4243037288,2388509769&fm=26&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2644451528,4180971732&fm=26&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2658655215,924706045&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=400545645,1325440240&fm=26&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2735743532,3162562682&fm=11&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2357555025,1781222560&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1604156508,3282489713&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=380663325,2271064034&fm=26&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=174537541,3462862985&fm=26&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1752649241,364583051&fm=26&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2890516059,4166188770&fm=27&gp=0.jpg',
  'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2435144503,200941795&fm=11&gp=0.jpg',
  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=877833827,2847590581&fm=26&gp=0.jpg',
  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=894452177,2810600152&fm=11&gp=0.jpg',
  'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4053642431,248486335&fm=27&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2914607659,905736210&fm=11&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1629456501,1514429218&fm=26&gp=0.jpg',
 ];
 var tmpArr = [];
 for (let i = 0; i < 22; i++) {
  var index = parseInt(Math.random() * 100) % imgs.length;
  var obj = {
  src: imgs[index],
  height: 0,
  top: 0,
  left: 0,
  }
  tmpArr.push(obj);
  imgs.splice(index, 1);
 }
 var dataList = this.data.dataList.concat(tmpArr)
 this.setData({ dataList: dataList }, function(){
  wx.hideLoading()
 });
 },
 /**预览图片 */
 previewImg: function (e) {
 var index = e.currentTarget.dataset.index;
 var dataList = this.data.dataList;
 var currentSrc = dataList[index].src;
 // var srcArr = dataList.map(function (item) {
 // return item.src;
 // });
 wx.previewImage({
  urls: [currentSrc],
 })
 },
})

wxss页面代码：

.main{ width: 100%; height: 100%; position: relative; }
.main image {
 box-shadow: 0 0 10rpx red; border-radius: 8rpx;
}
 

DEMO下载：https://github.com/xiaotanit/Tan_HtmlDemo

web瀑布流页面地址：https://github.com/xiaotanit/Tan_HtmlDemo/blob/master/JS/%E7%80%91%E5%B8%83%E6%B5%81_%E5%B7%A6%E6%B5%AE%E5%8A%A8.html

小程序瀑布流页面地址：https://github.com/xiaotanit/Tan_HtmlDemo/tree/master/wxMini/pages/discover/waterfall_flow

总结

以上所述是小编给大家介绍的web页面和微信小程序页面实现瀑布流效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

web页面和微信小程序页面实现瀑布流效果

- Author -

TDX

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
vue中template的三种写法示例
Oct 21 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 #Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 #Javascript
在vue 中使用 less的教程详解
Sep 26 #Javascript
vue如何进行动画的封装
Sep 26 #Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 #Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
Navicat(1) pytz(1) Tablespace(1) GoFrame(3) commit(1) 自定义函数(1) procedure(1) 内置函数(1) harbor(1) 分布式锁(3)
You might like
php 多个submit提交表单 处理方法
2009/07/07 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
vue+Element中table表格实现可编辑（select下拉框）
2020/05/21 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
[00:34]拔城逐梦，热血永恒！2020（秋）完美世界城市挑战赛报名开启
2020/10/09 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
浅谈Python处理PDF的方法
2017/11/10 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
Dillard’s百货官网：Dillards.com
2018/05/26 全球购物
制定岗位职责的原则
2013/11/08 职场文书
大学活动总结范文
2014/04/29 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
教师个人事迹材料
2014/12/17 职场文书
信仰纪录片观后感
2015/06/08 职场文书
居安思危观后感
2015/06/11 职场文书
python playwright之元素定位示例详解
2022/07/23 Python