zoukankan      html  css  js  c++  java
  • 小程序里写瀑布流图片展示

    展示效果

    1.结构

    <view class='shopping-list'>
      <view class='title'>--个人作品--</view>
      <view class='collection-list'>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image mode="widthFix" src='http://source.unsplash.com/random/340x340'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x500'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x400'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x390'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
            <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x700'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
            <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x300'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
      </view>
    </view>
    <view class='shopping-list'>
      <view class='title'>--个人作品--</view>
      <view class='collection-list'>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image mode="widthFix" src='http://source.unsplash.com/random/340x340'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x500'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x400'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
        <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x390'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
            <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x700'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
            <view class='list-content' bindtap='collectionDetail'>
          <view class='colllection-img'>
            <image  mode="widthFix" src='http://source.unsplash.com/random/340x300'></image>
          </view>
          <view class='collection-name'>
            <text>明清古玉和田玉天然和田玉挂件</text>
          </view>
          <view class='collection-price'>
            <text class="priceSign">¥</text>
            <text class="priceValue">20000</text>
          </view>
        </view>
      </view>
    </view>
    

      2.样式

    /* 瀑布流 */
    .shopping-list{
      width: 100%;
      background: #F3F3F3;
    }
    .shopping-list .title{
      text-align: center;
      padding-top: 30rpx;
    }
    .collection-list{
      /* font-size: 0; */
      margin: 30rpx 24rpx 0 24rpx;
      /* 设置两列 */
      columns: 2;
      /* 两列之间的宽度 */
      column-gap: 24rpx;
    }
    .list-content{
      width: 100%;
      /* 强制文字和图片不分离
      如果不添加,文字显示会有bug
      */
      break-inside: avoid;
    }
    .colllection-img{
      width: 100%;
    }
    
    .colllection-img image{
      width: 100%;
    }
    .collection-name text{
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 32rpx;
    }
    .collection-price .priceSign{
      font-size: 21rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #C30D23;
      line-height: 32rpx;
    }
    .collection-price .priceValue{
      font-size: 21rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #C30D23;
      line-height: 32rpx;
    }
    努力才会有收获,坚持才会成功。
  • 相关阅读:
    浅析软件开发项目的前期沟通工作
    .net core 和 WPF 开发升讯威在线客服系统:实现对 IE8 的完全完美支持 【干货】
    产品的定价策略(一):想通过产品挣钱,首先你产品的目标客户得不差钱
    .net core 和 WPF 开发升讯威在线客服系统:使用线程安全的 BlockingCollection 实现高性能的数据处理
    .net core 和 WPF 开发升讯威在线客服系统:使用 TCP协议 实现稳定的客服端
    .net core 和 WPF 开发升讯威在线客服系统:使用 WebSocket 实现访客端通信
    Centos上配置两层nginx转发,把请求转发到外网
    真实字节二面:什么是伪共享?
    关于MVCC,我之前写错了,这次我改好了!
    从家庭主妇到格力老总,董明珠的大女主逆袭之路
  • 原文地址:https://www.cnblogs.com/97Coding/p/15085547.html
Copyright © 2011-2022 走看看