原生js实现瀑布流及微信小程序中使用左右两列实现瀑布流

发布时间：2020-12-14 19:28:08 所属栏目：资源来源：网络整理

导读：1.效果图 2.原生js实现瀑布流 html文件 div id = "root" class = "item" "itemImg" img src = "../images/1.jpeg" alt = "" / / div "../images/3.jpeg" "../images/2.jpg" / div / div 图片可以自己找点替换下就可以了 css文件 *{ margin : 0 ; padding : 0

1.效果图

2.原生js实现瀑布流

html文件

<div id="root">
    class="item">
        "itemImg">
            <img src="../images/1.jpeg" alt="" />
        </div>
    "../images/3.jpeg" "../images/2.jpg" </div>
</div>

图片可以自己找点替换下就可以了
css文件

*{
    margin: 0;
    padding: 0;
}
#root{
    position: relative;
}
.item{
    float: left;
    5px;
}
/* 添加阴影的时候，加上border会显得更加有点悬浮感 */
.itemImg{
    5px;
    border: 1px solid #ccc;
    box-shadow: 0 5px border-radius: 5px;
}
.itemImg img{
    width: 230px;
    height: auto;
}

js文件

window.onload = function () {

    /* 计算图片列数及获取最小高度图片 */
    generateImg('root','item');

    /* 对窗口大小改变进行监听，大小改变则重新布局 */
    window.addEventListener('resize',function() {
        generateImg('item')
    });

    /* 图片对象 */
    let imgData = {
        images: [
            {
                "src":"23.png"
            },{
                "22.png"
            },68);">"2.jpg"
            },68);">"4.jpg"
            },68);">"7.jpg"
            }
        ]
    };
    /* 对滚动监听 */
    'scroll',function() {
        if(checkIsScroll()) {
            let rootElement = document.getElementById('root');
            /* 利用documentFragment来创建 */
//                    let documentFragment = document.createDocumentFragment();
            let length = imgData.images.length;

            /* 循环创建图片组 */
            for(let i = 0; i < length; i++) {
                let itemElement = document.createElement('div');
                itemElement.className = 'item';
                rootElement.appendChild(itemElement);
                let itemImgElement = 'div');
                itemImgElement.className = 'itemImg';
                itemElement.appendChild(itemImgElement);
                let itemImg = 'img');
                itemImg.style.cssText = 'opacity: 0; transform:scale(0)';
                itemImg.src = "../images/" + imgData.images[i].src;
                itemImgElement.appendChild(itemImg);
//                        documentFragment.appendChild(itemElement);

                /* 在1秒后让图片显示出来 */
                (function(img){
                    setTimeout(function(){
                        img.style.cssText="opacity:1;transform:scale(1)";
                    },1000);
                })(itemImg);
            }
//                    rootElement.appendChild(documentFragment);
            generateImg('item');
        }
    });
};

/* 计算图片列数及获取最小高度图片 */
function generateImg(parent,content) {
    /* 获取父元素及其所以节点内容 */
    let parentElement = document.getElementById(parent);
    let childContent = getChildElement(parentElement,content);

    /* 获取图片宽度 */
    let imgWidth = childContent[0].offsetWidth;
    /* 获取一行图片形成的列数 */
    let imgColumn = Math.floor(document.documentElement.clientWidth / imgWidth);
    /* 重新设置父级容器的宽度 */
    parentElement.style.cssText = 'width:' + imgColumn * imgWidth + 'px;margin:0 auto';

    /* 存储每个图片的高度，以此来找到最小图片高 */
    let imgHeightArray = [];
    let length = childContent.length;
    for(let i = 0; i < length; i++) {
        /* i<imgColumn统计每一行的图片高度 */
        if(i < imgColumn) {
            /* 防止用户改变窗口大小时，内容样式错乱 */
            childContent[i].style.cssText = '';
            imgHeightArray.push(childContent[i].offsetHeight);
        } else {
            /* 如果不是这一行的，则找到最小值和最小值的索引值 */
            let minHeight = getMinImgHeight(imgHeightArray);
            let minHeightIndex = getMinHeightIndex(imgHeightArray,minHeight);
            /* 对这个图片设置位置 */
            childContent[i].style.position = 'absolute';
            childContent[i].style.top = minHeight + 'px';
            childContent[i].style.left = childContent[minHeightIndex].offsetLeft + 'px';
            /* 更换此时的最小高度 */
            imgHeightArray[minHeightIndex] = childContent[i].offsetHeight + minHeight;
        }
    }
}

/* 检测滚动是否达到了可视区 */
function checkIsScroll() {
    /* 获取root根节点 */
    let parentElement = 'root');
    /* 获取父元素下的类名为box的元素节点 */
    let childContent = getChildElement(parentElement,136);">/* 获取最后一个元素的高度 */
    let lastElementHeight = childContent[childContent.length - 1].offsetTop;
    /* 获取滚动的距离 */
    let scrollTopSpace = document.documentElement.scrollTop || document.body.scrollTop;
    /* 获取可视区的距离 */
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

    if(lastElementHeight > scrollTopSpace + clientHeight) {
        return true;
    }
}
/* 获取子节点的所有内容 */
function getChildElement(parentElement,136);">/* 存储元素信息 */
    let elementArray = [];
    /* 获取父元素下的所有节点信息 */
    let allElement = parentElement.getElementsByTagName('*');
    let length = allElement.length;
    for (let i = /* 找到对应的类名 */
        if (allElement[i].className === content) {
            elementArray.push(allElement[i]);
        }
    }
    return elementArray;
}

/* 获取图片最小高度 */
function getMinImgHeight(heightArray) {
    let length = heightArray.length;
    let minHeight = heightArray[0];
    for(let i = 0; i < length; i++) {
        minHeight = Math.min(minHeight,heightArray[i]);
    }
    return minHeight;
}

/* 获取图片最小高度的索引值 */
function getMinHeightIndex(heightArray,minHeight) {
    let length = heightArray.length;
    for(let i = 0; i < length; i++) {
        if(heightArray[i] == minHeight) {
            return i;
        }
    }
}

3.微信小程序中实现瀑布流

效果图

wxml文件

wxss文件
page{
  background: #f6f6f6;
}
/* 最外层 */
.cateCommodity {
  display: flex;
  20rpx 28rpx 8rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}
/* 左右两个容器 */
.leftContainer{
  margin-right: 22rpx;
  flex-direction: column;
}
.rightContainer{
  flex-direction: column;
}
/* 图片容器 */
.cateItem {
  margin-bottom: 20rpx;
}
.item{
  335rpx;
  #fff;
  6rpx;
}
.itemImg{
  14rpx;
  100%;
  vertical-align: middle;
  6rpx;
}
.title{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}
/* 返回顶部 */
.skipTop {
  position: fixed;
  bottom: 30rpx;
  right: 20rpx;
  90rpx;
  height: 90rpx;
}

.skipTop image {
  vertical-align: middle;
}
js文件
Page({
  data: {
    imageArray: [
      {
        id: 1,src: '../../images/avatar.jpeg',title: '现代新中式创意陶瓷简约摆件客厅家居玄关软装饰品家居酒柜盘子'
      },{
        id: '../../images/avatar3.jpg',68);">'秋冬季新款2018休闲运动服套装女士韩版金丝绒卫衣加绒加厚两件套'
      },68);">'../../images/avatar4.jpeg',68);">'女童床上用品四件套公主房1.2m床品纯棉女孩1.8儿童床单三件套1.5'
      },68);">'../../images/avatar7.jpg',68);">'婴儿床圆床蚊帐落地款宝宝椭圆床蚊帐支架款儿童床蚊帐BB床小蚊帐'
      },68);">'../../images/avatar9.jpeg',68);">'包邮动感158T速滑鞋轮滑鞋竞速鞋高端碳纤鞋 固定码 专业定制'
      },68);">'../../images/logo7.jpg',68);">'Infanton落地婴儿床蚊帐带支架儿童床蚊帐宝宝蚊帐婴童蚊帐'
      },68);">'../../images/logo6.jpg',68);">'老A轮滑 米高seba hl碳纤版SEBA HL CARBON 平花鞋刹车鞋全能鞋'
      },68);">'../../images/logo.jpeg',68);">'洋洋法代 sandro 17秋冬 一粒扣羊毛长款大衣外套EKIN M9575H'
      },],showTopImage: false,},onPageScroll(event) {
    /* 利用两个条件，防止重复的进行setData操作 */
    if (event.scrollTop > 300 && this.data.showTopImage == false) {
      this.setData({
        showTopImage: true
      })
    } else if (event.scrollTop < true) {
      this.setData({
        showTopImage: false
      })
    }
  },skipTop() {
    /* 返回顶部 */
    wx.pageScrollTo({
      scrollTop: 0,duration: 300
    });
    this.setData({
      showTopImage: false
    });
  },onReachBottom: function () {
    let temporaryArray = this.data.imageArray;
    temporaryArray.push(...this.data.imageArray);
    this.setData({
      imageArray: temporaryArray
    })
  },})
左右两列实现瀑布流其实就是对同一数组进行了两次渲染，只是把其中的一半给隐藏了
正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断iOS和Android及PC端
纯css实现瀑布流（multi-column多列及flex布局）
实现单行及多行文字超出后加省略号
微信小程序之购物车和父子组件传值及calc的注意事项

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!