小程序瀑布流布局

 

        <!-- 瀑布流 -->
        <view style="display:none">
            <!-- 获取图片尺寸信息 -->
            <image wx:for="{{loadList}}" wx:key="id" id="{{item.recipe.id}}" src="{{item.recipe.photo}}" bindload="onImageLoad"></image>
        </view>
        <view class='img_container'>
            <!-- 两列渲染 -->
            <view class="img_item">
                <view wx:for="{{col1}}" wx:key="id" class='img_item_box' data-id='{{item.recipe.id}}' bindtap='goDetaile'>
                    <image mode="widthFix" class='index_img_item' src="{{item.recipe.photo}}" style="width:100%;;height:{{item.height}}px;"></image>
                    <view class='index_img_title'>
                        <view class='index_img_title_item'>{{item.recipe.name}}</view>
                        <view class='index_img_title_mark'>
                         <view wx:if='{{item.recipe.author.name!=""}}'>
                                <image class='mark radious' src='{{item.recipe.author.photo}}'></image><text class='author_name'>{{item.recipe.author.name}}</text> </view>
                           <view wx:if='{{item.recipe.stats.n_cooked>0}}'>
                                <image class='mark' src='../../images/icon/icon-pingfen.png'></image> {{item.recipe.stats.n_cooked}}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="img_item">
                <view wx:for="{{col2}}" wx:key="id" class='img_item_box' data-id='{{item.recipe.id}}' bindtap='goDetaile'>
                    <image mode="widthFix" class='index_img_item' src="{{item.recipe.photo}}" style="width:100%;;height:{{item.height}}px"></image>
                    <view class='index_img_title'>
                        <view class='index_img_title_item'>{{item.recipe.name}}</view>
                         <view class='index_img_title_mark'>
                         <view wx:if='{{item.recipe.author.name!=""}}'>
                                <image class='mark radious' src='{{item.recipe.author.photo}}'></image><text class='author_name'>{{item.recipe.author.name}}</text> </view>
                           <view wx:if='{{item.recipe.stats.n_cooked>0}}'>
                                <image class='mark' src='../../images/icon/icon-pingfen.png'></image> {{item.recipe.stats.n_cooked}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

喜欢下方小程序的私信送源码