无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 产业新闻 >

家政保洁微信小程序_web页面和微信小程序页面完成瀑布流效果

时间:2021-01-08 12:20来源:家政保洁微信小程序 作者:jianzhan 点击:
web网页页面和手机微信微信小程序网页页面完成流式布局实际效果 本文关键详细介绍了web网页页面和手机微信微信小程序网页页面完成流式布局实际效果,文中根据案例编码文图
web页面和微信小程序页面实现瀑布流效果       这篇文章主要介绍了web页面和微信小程序页面实现瀑布流效果,本文通过实例代码图文介绍,给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下

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

1)、加载图片,获取图片的宽高度;

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

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

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

1、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 
 div img src="../img/0.jpg"/ /div 
 div img src="../img/1.jpg"/ /div 
 div img src="../img/2.jpg"/ /div 
 div img src="../img/3.jpg"/ /div 
 div img src="../img/4.jpg"/ /div 
 div img src="../img/5.jpg"/ /div 
 div img src="../img/6.jpg"/ /div 
 div img src="../img/7.jpg"/ /div 
 div img src="../img/8.jpg"/ /div 
 div img src="../img/9.jpg"/ /div 
 div img src="../img/10.jpg"/ /div 
 div img src="../img/11.jpg"/ /div 
 div img src="../img/12.jpg"/ /div 
 div img src="../img/13.jpg"/ /div 
 div img src="../img/14.jpg"/ /div 
 div img src="../img/15.jpg"/ /div 
 div 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)、计算每个图片的定位,重新渲染

先看小程序的效果图(瀑布流+无限循环加载):

wxml页面代码:

 scroll-view scroll-y='true' bindscrolltolower='loadMoreImages' 
 image wx:for='{{dataList}}' wx:key='item' src='{{item.src}}' 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 = [
 '70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u= fm=15 gp=0.jpg',
 '70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=5777579 fm=11 gp=0.jpg',
 '70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=6771261 fm=11 gp=0.jpg',
 '70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=7170033 fm=26 gp=0.jpg',
 '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=27 gp=0.jpg',
 '70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 '70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=27 gp=0.jpg',
 '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=11 gp=0.jpg',
 '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg',
 var tmpArr = [];
 for (let i = 0; i 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下载:

总结

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


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866