zoukankan      html  css  js  c++  java
  • 小程序实现瀑布流-最简单实现办法

    html:

    <view class="main">

    <view class="leftContainer">
    <block wx:for="{{listArr}}" wx:key="index">
    <view class="cateItem" wx:if="{{index%2==0}}" data-id="{{item.item_id}}" bindtap="detail">
    <view class="item">
    <image src="{{item.cover_url}}" class="itemImg" mode="widthFix"></image>
    </view>
    </view>
    </block>
    </view>
    <view class="rightContainer">
    <block wx:for="{{listArr}}" wx:key="index">
    <view class="cateItem" wx:if="{{index%2==1}}" data-id="{{item.item_id}}" bindtap="detail">
    <view class="item">
    <image src="{{item.cover_url?item.cover_url:'https://img.uhomes.com/static/wxapp/uhouzz/images/onorder.jpg'}}" class="itemImg" mode="widthFix"></image>
    </view>
    </view>
    </block>
    </view>
    </view>
    css:
    .main {
    display: flex;
    padding: 10rpx 10rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    }
     
    .leftContainer {
    display: flex;
    margin-right: 10rpx;
    flex-direction: column;
    }

    .rightContainer {
    display: flex;
    flex-direction: column;
    }

    .cateItem {
    margin-bottom: 20rpx;
    }

    .item {
    360rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 6rpx;
    }

    .itemImg {
    margin-bottom: 14rpx;
    100%;
    vertical-align: middle;
    border-radius: 6rpx;
    }
    js部分自己加上图片数组就好了,原理就是把数组分成了两部分去渲染
    本人小白,各位想踏入前端的,我们可以一起学习,欢迎程序员大佬的指点
  • 相关阅读:
    javascript实现简单的轮播图片
    用struts实现简单的登录
    非非是
    javabean连数据库
    超级迷宫 nabc
    我的Time
    SQL SERVER 2008 评估期已过
    《架构漫谈》有感
    c#
    与String有关的强制转换
  • 原文地址:https://www.cnblogs.com/xiao-lei-ge/p/13518850.html
Copyright © 2011-2022 走看看