<style>
    .item{
        width: 200px;
        height: auto;
        box-sizing: border-box;
        border: 1px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 15px #666;
        -moz-box-shadow: 0 0 15px #666;
        box-shadow: 0 0 15px #666;
        /*position: absolute;*/
        text-align: center;
        display: inline-block;
        margin-left: 40px;
        margin-top: 10px;
        padding-bottom: 10px;
    }
    .item>img{
        height: auto;
        width: 180px;
        display: inline-block;
        margin: 10px;
    }
</style>

上面这段代码是针对于下面的瀑布图片显示的。

<div class="picturewall">
                    
                    <div class='item'>
                        <img src="{:config('public.static')}/imgaes/p.jpg">
                        <hr/>
                        <h4>{v.title}</h4>
                        <h4>{v.s_name}</h4>
                        <h4>{v.usages}</h4>
                        <h4>{:date('Y-m-d',$v.ctime)}</h4>
                    </div>
                   
                </div>

这个就是瀑布流的html中的代码，item是数据，你可以多复制几个出来，放在picturewall中。

$(function(){
        //添加item的函数
        function getItems(){
            isbool=false;
            
                $.ajax({
                    type: "POST",
                    url: "index",
                    async: true,
                    data: {'page':page,'model':model,'f':1},
                    success: function(msg){
                        if(msg.code==1){
                            var str = '';
                            for (var i=0;i<msg.data.length;i++){
                                str +='<div class="item">' +
                                    '      <img src="{:config(\'public.static\')}/imgaes/'+img+'">' +
                                    '      <hr/>'+
                                    '      <h4>'+msg.data[i].title+'</h4>' +
                                    '      <h4>'+msg.data[i].s_name+'</h4>' +
                                    '      <h4>'+msg.data[i].usages+'</h4>' +
                                    '      <h4>'+msg.data[i].ctime+'</h4>' +
                                    '</div>'
                            }
                            $('.picturewall').append(str);   
                            isbool=true;
                        }

                    }
                });
            
        }
        //判断文档滚动的位置

        function wheelListen(){
            var srollHeight = $(document).scrollTop();
            console.log(isbool)
            if(srollHeight+$(window).height() >= $(document).height()-100 && isbool==true){
                getItems();
            }
        }
        //绑定事件
        $(window).on("load",function(){
            $(document).bind("mousewheel DOMMouseScroll",function(){
                wheelListen();
            });
        })
    });

 

这个就是核心代码，其中有个问题大家也是常见的，就是ajax重复加载数据，说白一点就是滑动轮滑的快就重复加载数据，我们这里使用了isbool来判断和阻止。