Vue如何写一个瀑布流加载

一直用Vue做项目，需要做一个瀑布流加载，虽然以前也写过瀑布流，但是当你从服务器请求数据在渲染在页面的时候会有高度不准确的问题，所以带来了一个全新的瀑布流。

用到Vue2和axios 这两个文件
Vue2地址：https://cn.vuejs.org/v2/guide/installation.html
axios地址：https://www.npmjs.com/package/axios

至于样式，作为一个有追求的前端咱们自己调下就好了

html代码

    
        
        
        
        
        
        
    
    
        

            

                


                
                


                
                

                    

                        
                        

                            
{{item.msg}}
                        
                    
                
            
            
        

        
    

当然你需要一个后台文件，不会写的也没关系，我也是找我后台帮我写的，分享大家。

php文件

"item1",
            1=>"item2",
            2=>"item3",
            3=>"item4",
            4=>"item5",
            5=>"item6",
            6=>"item7",
            7=>"item8",
            8=>"item9",
            9=>"item10",
        );


        for($i=0;$i<10;$i++){
            $arr[$i] = array(
                 'imgsrc'=>'imagse/'.($i+1).'.jpg',
                 'msg'=>$msg[$i],
            );
        }
        echo json_encode($arr);

至于图片你不能再管我要了吧？不过我可以给你我的图片名字方便你把你的图片修改下名字即可。
img图片名称例子：1.jpg。 简约大方 。