uni-app中几行代码轻松实现瀑布流显示。

uni-app中几行代码轻松实现瀑布流显示。

实现思路：创建左右两个容器，在数据导入的时候获取两个容器的高度，把即将要导入的数据，导进高度低的一个容器即可。

HTML代码

<body style="background-color: #f3f3f3;">  
    <!-- 商品列表 -->  
    <div class="twoRankedBox">  
        <ul class="BoxLeft">  

        </ul>  

        <ul class="BoxRight">  

        </ul>  
    </div>  
</body>

CSS代码

*{  
    padding:0px;  
    margin:0px;  
    list-style: none;  
    font-style:normal;  
    font-family: arial;  
    font-family: Microsoft YaHei,arial;  
}  
.twoRankedBox{  
    margin:6px 8px;  
    overflow: hidden;  
    padding-bottom:25px;  
}  
.twoRankedBox ul{  
    width:49%;  
    float: left;  
}  
.twoRankedBox ul:last-child{  
    margin-left:2%;  
}  
.twoRankedBox ul li{  
    padding:5px;  
    margin-bottom:6px;  
    padding-bottom:8px;  
    background-color: #FFFFFF;  
}  
.twoRankedBox ul li p:first-child{  
    padding-top:0px;  
}  
.twoRankedBox ul li p{  
    padding-top:4px;  
}  
.product_picture img{  
    display: block;  
    width:100%;  
}  
.product_np{  
    overflow: hidden;  
    line-height:20px;  
}  
.product_np a{  
    display: block;  
    overflow:hidden;  
    text-overflow:ellipsis;  
    white-space:nowrap;  
}  
.product_np a:first-child{  
    font-size:0.9em;  
    color:#58b7e3;  
    width:65%;  
    float: left;  
}  
.product_np a:last-child{  
    font-size:0.8em;  
    color:#f00;  
    float: right;  
    width:35%;  
    text-align: right;  
}  
.product_ie{  
    font-size:0.8em;  
    color:#777;  
}

JS代码（需要JQ，因为获取高度是用JQ写的。可以自行修改）

//模拟JSON数据  
var json = {  
    data:[  
        {name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_01.jpg'},  
        {name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_02.jpg'},  
        {name:'白色婚纱',price:'668',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_03.jpg'},  
        {name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_04.jpg'},  
        {name:'格纹小短裙',price:'88',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_05.jpg'},  
        {name:'复古旗袍',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_06.jpg'},  
        {name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_07.jpg'},  
        {name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_08.jpg'},  
        {name:'白色婚纱',price:'668',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_09.jpg'},  
        {name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_10.jpg'},  
        {name:'格纹小短裙',price:'118',details:'质量超好特别的舒适，夏天首选。',src:'images/temporary/img_11.jpg'}  
    ]  
}  

//模拟数据导入  
for(var i=0;i<json.data.length;i++){  
    var chtml = '<li><p class="product_picture"><img src="'+json.data[i].src+'"></p>'  
            +'<p class="product_np"><a>'+json.data[i].name+'</a><a>￥'+json.data[i].price+'</a></p>'  
            +'<p class="product_ie">'+json.data[i].details+'</p></li>'  

    if($('.BoxLeft').height() < $('.BoxRight').height()){  
        $('.BoxLeft').append(chtml);  
    }else{  
        $('.BoxRight').append(chtml);  
    }  
}

更多关于uni-app中几行代码轻松实现瀑布流显示。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中几行代码轻松实现瀑布流显示。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中实现瀑布流布局，可以利用CSS的Flexbox布局或者CSS Grid布局来实现，不过更常见和高效的方式是使用一个第三方组件库，比如uView UI或者Vant Weapp，它们提供了现成的瀑布流组件。不过，如果你希望从零开始，手动实现一个简单的瀑布流布局，可以参考以下代码示例。

首先，确保你的uni-app项目已经创建并运行。接下来，在页面的<template>部分，你可以这样布局：

<template>
  <view class="container">
    <view class="waterfall">
      <block v-for="(item, index) in items" :key="index">
        <view class="item" :style="{ height: item.height + 'px' }">
          <image :src="item.image" mode="aspectFill" class="image"></image>
          <text class="text">{{ item.text }}</text>
        </view>
      </block>
    </view>
  </view>
</template>

在<script>部分，定义数据和方法：

<script>
export default {
  data() {
    return {
      items: [
        { image: 'path/to/image1.jpg', text: 'Item 1', height: 200 },
        { image: 'path/to/image2.jpg', text: 'Item 2', height: 300 },
        { image: 'path/to/image3.jpg', text: 'Item 3', height: 150 },
        // 更多项目...
      ]
    };
  }
};
</script>

在<style>部分，添加必要的样式：

<style scoped>
.container {
  padding: 10px;
}
.waterfall {
  column-count: 3; /* 瀑布流列数 */
  column-gap: 10px; /* 列间距 */
}
.item {
  display: inline-block;
  width: 100%; /* 每列的宽度 */
  box-sizing: border-box;
  margin-bottom: 10px; /* 项目间距 */
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
}
.image {
  width: 100%;
  display: block;
}
.text {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>

上述代码使用了CSS的column-count和column-gap属性来创建瀑布流布局。每个.item元素会按照定义的列数自动分布，并根据其height属性调整高度。这种实现方式简单直接，适合数据量不大或者对性能要求不高的场景。如果数据量大或者需要更复杂的交互，建议使用专门的瀑布流组件库，以提高性能和开发效率。

回到顶部