jquery瀑布流

    .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;
    }

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

                    
                    

                        
                        
                        {v.title}
                        {v.s_name}
                        {v.usages}
                        {:date('Y-m-d',$v.ctime)}
                    
                   
                

这个就是瀑布流的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= $(document).height()-100 && isbool==true){
                getItems();
            }
        }
        //绑定事件
        $(window).on("load",function(){
            $(document).bind("mousewheel DOMMouseScroll",function(){
                wheelListen();
            });
        })
    });

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