php+mysql+jquery瀑布流

最新推荐文章于 2021-09-07 20:24:10 发布

风火程序员

最新推荐文章于 2021-09-07 20:24:10 发布

阅读量7.5k

点赞数 1

分类专栏： javascript php 文章标签：瀑布流

本文链接：https://blog.csdn.net/phpfenghuo/article/details/19299309

版权

瀑布流：

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

下面例子用php+mysql+jquery实现了瀑布流布局，实现了大小不一的图片按照一定的规律方式排列。另外实现了图片延迟加载的功能，点击浏览器下拉滚动条时才加载更多的内容。

本篇博客资源下载：http://download.csdn.net/detail/u011986449/6927589 php+mysql+jquery+图片

效果如下：

index.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>瀑布流-NiceGY</title>
 <script type="text/javascript" language="javascript" src="jquery.js"></script>
 <link type="text/css" rel="stylesheet" href="waterfall.css" />
 <script type="text/javascript" language="javascript" src="waterfall.js"></script>
 <style>
body{text-align:center;}
#stage{ margin:0 auto; padding:0; width:880px; }
#stage li{ margin:0; padding:0; list-style:none;float:left; width:220px;}
#stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; }
</style>
 </head>
 <body>
     <ul id="stage">
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
 </body>
 </html>

waterfall.js

/*
 *  Javascript文件：waterfall.js
 */
$(function(){
     jsonajax();
 });
 
 //这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据
 $(window).scroll(function(){    
     //此方法是在滚动条滚动时发生的函数
     // 当滚动到最底部以上100像素时，加载新内容
     var $doc_height,$s_top,$now_height;
     $doc_height = $(document).height();        //这里是document的整个高度
     $s_top = $(this).scrollTop();            //当前滚动条离最顶上多少高度
     $now_height = $(this).height();            //这里的this 也是就是window对象
     if(($doc_h

最低0.47元/天解锁文章

风火程序员

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
5
评论
php+mysql+jquery瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。php+mysql+jquery实现了瀑布流布局，实现了大小不一的图片按照一定的规律方式排列。另外实现了图片延迟加载的功能，点击浏览器下拉滚动条时才加载更多的内容。
复制链接

扫一扫

专栏目录