微信小程序实现瀑布流布局效果

一、效果

微信小程序实现瀑布流布局效果_第1张图片

二、内容

 1、xml代码


  
  推荐
  
    
      
        
        
        {{itemName.name}}
      
    
  

2、css代码



/* 列表标题 */
.list_title{
  background-color: transparent;
  margin-right: 30rpx;
  margin-left: 30rpx;
  margin-bottom: 20rpx;
  color: #000;
  font-weight: 800;
  font-size: 36rpx;
}

/* item */
.waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5em;
  grid-auto-flow: row dense;
  grid-auto-rows: 15px;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.waterfall .item {
  width: 100%;
  background: #f0f0f0;
  color: #ddd;
}

.waterfall .item:nth-of-type(2n+1) {
  grid-row: auto / span 7;
  border-radius: 10rpx;
}
.waterfall .item:nth-of-type(2n+2) {
  grid-row: auto / span 5;
  border-radius: 10rpx;
}
/* .waterfall .item:nth-of-type(3n+3) {
  grid-row: auto / span 12;
  border-radius: 10rpx;
} */

/* item图片 */
.list_item_pic{
  height: 100%;
  width: 100%;
  border-radius: 10rpx;
}

/* item文本 */
.item_conn_des{
  color: #666666;
  font-size: 26rpx;
  width: 240rpx;
  font-weight: bolder;
  position: relative;
  bottom: 70rpx;
  margin-left: 10rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: flex-start;
  display: -webkit-box;
  overflow: hidden;
}
/* 列表部分 */

3、js代码初始化数据

   list: [{
      name: '苏ww',
      num: '1',
      title: 'fuyuykuykuyk',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    {
      name: 'eegrr',
      num: '1',
      title: '67989899',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '是的举动',
      num: '1',
      title: '8oykhkhkh',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '如图那',
      num: '1',
      title: 'jufutyyii65342',
      url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/cb643adf-0653-4e25-82c9-e27c99ef2a4e.png',
      avatar: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/3.png'
    },
    {
      name: 'dfh',
      num: '1',
      title: '测kdndvkjdv;;l试测试测',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '4tbbs6',
      num: '1',
      title: '3242423423423',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '233ndsgty',
      num: '1',
      title: '3453576868',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '6u6ks33',
      num: '1',
      title: '3453576868',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: 'opr0909u',
      num: '1',
      title: '5475757',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '093rfoih',
      title: '465768799',
      num: '1',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    }
    ]

你可能感兴趣的:(微信小程序,微信小程序,小程序)