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

知道91 | Web前端 | 2014-10-11 | 阅读:3804

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

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

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

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


 
 
 
 Insert title here
 
 
 
 
 
 
 
 
 
 
 
瀑布流下来了
加载中,请稍后...

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实现网页瀑布流的例子,赶紧去尝试一下吧。