taro实现小程序端瀑布流

微信小程序暂时未发现如何获取dom,但能获取节点的信息

taro端可通过ref获取到节点,但无法通过节点获取节点的相关信息

效果图:

代码示例:

import Taro from '@tarojs/taro'
import {View,Text,Image} from '@tarojs/components'
import React,{Component} from 'react'

import './index.less'
/**
 * https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2209999056,1217794382&fm=26&gp=0.jpg
 * https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2418077635,996250637&fm=26&gp=0.jpg
 * https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2261944737,731173482&fm=26&gp=0.jpg
 * https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1874647665,1205912684&fm=26&gp=0.jpg
 * https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3152590946,2826023176&fm=26&gp=0.jpg
 * https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3975309943,373981693&fm=26&gp=0.jpg
 */

class Recommend extends Component{

    state={
        arr:[
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2209999056,1217794382&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2418077635,996250637&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2261944737,731173482&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1874647665,1205912684&fm=26&gp=0.jpg',
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3152590946,2826023176&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3975309943,373981693&fm=26&gp=0.jpg'
        ],
        initHeights:[]
    }
	
	//制造瀑布流单个元素
     _madeImage(str,index)
    {


        return <View className='.r-o'>
                <Image  src={str} />
                {
                    index%2==0?<View style='height:100px'>哇啦啦啦</View>:<View style='height:50px'>啦啦</View>
                }
            </View>
        
    }
    componentDidMount()
    {
 		//200毫秒后获取节点信息,避免取值为null
	    setTimeout(()=>{
	        const query = Taro.createSelectorQuery()
	        query.selectAll('.r-o').boundingClientRect((res)=>{
	            // 第二个参数是通过ref获取到的瀑布流的每一个元素
	            this._getHeight(res,this.f.childNodes);
	        }).exec()
	    },200)
	
	    }
	    _getHeight=(nodes,childNodes)=>
	    {
			//盛放每行高度的数组
	        let heights=[];
	        nodes.forEach((item,index) => {
	        	//前两个为基准
	            if(index<2)
	            {
	                heights.push(item.height);
	            }else{
	            	//查找最低高度然后放置最后改变最低高度过程
	                    let min=Math.min.apply(null,heights);
	                    let currentIndex=heights.indexOf(min);
	                    let x=nodes[currentIndex].left;
	                    let y=min;
	
	                    childNodes[index].style.position='absolute';
	                    
	                    childNodes[index].style.left=x-10+'px';
	                    childNodes[index].style.top=y+'px';
	
	                    heights[currentIndex]=min+item.height;
	
	                    
	            }
	        });
    }

    render()
    {
        return(

            <View className='r-c'>
                <Text className='r-t' id='f'>为你推荐</Text>
                <View className='r-i' id='ri' ref={(v)=>this.f=v} name='ww'>
                    {
                        this.state.arr.map((item,index)=>{
                           return this._madeImage(item,index);

                        })
                    }
                </View>
            </View>
        )
    }
}

export default Recommend

less:

.r-c{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;    


    .r-t{
        width: 100%;
        font-weight: bold;
        margin: 20px;
        text-align: left;
        >Text{
            margin-left: 25px;
        }
    }
    .r-i{
        position: relative;
        .r-o{
            float: left;
            width: 320px;
            margin: 0 5px;
            border:solid 1px #ccc;
            >Image{
                width: 100%;
            }
            .r-info{
                display: flex;
                flex-direction: column;
                padding: 20px 20px;
                >Text{
                    line-height: 50px;
                }
                >Text:nth-child(1)
                {
                    font-weight: bold;
                }
                >Text:nth-child(2)
                {
                    color:#ccc;
                    font-size: 25px;
                }
                >Text:nth-child(3)
                {
                    color:#F93841;
                }
            }
        }
    }
}