瀑布流:
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是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