怎样使用jQuery实现网页瀑布流示例讲解

现在瀑布流的网页非常流行，很多站长也想使用瀑布流的方式来建站，那么怎样来实现呢？试想这样的效果不得不依靠jQuery这个强大的Javascript框架，那么应该怎样使用jQuery实现网页瀑布流呢？下面使用一个具体的例子来说明使用jQuery实现网页瀑布流的方法。

首先要下载瀑布流的插件jquery.masonry.min.js，下载地址，下面讲解具体的流程。

1. 页面初始化时，调用插件进行一次排版
2. 当用户将滚动条拖到底部时，用ajax加载一次数据，并排版显示
3. 重复2，直到无数据

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
    
瀑布流下来了
 
 
 
 
 

    加载中，请稍后...
 
 
 
 
我是页脚
 
 
 
 

Action代码

assign('height', $res);
        $this->display();
        
    }
//获取一次请求的数据
        public function getMore(){
        for ($i=0;$i<6;$i++){
            $res[$i] = rand(100, 400);
        }
        $this->ajaxReturn($res);
    }
}
?>

注意：通过判断窗口是否滚动到页面底部来决定用ajax加载一次数据。如果不做处理，会一下子请求很多次。因此，需要使用条件来限制。

我使用的是往一个元素上赋值 $("#loading").data("on", true);，在请求期间判断是true则不继续请求，然后在页面请求完成后再赋值为false。下面是图片示例。

以上就是使用jQuery实现网页瀑布流的例子，赶紧去尝试一下吧。