php+mysql+jquery瀑布流的实现
<!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>瀑布流-Derek for PHP100.com</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>
</head>
<body>
<ul id="stage">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
/*
* 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_height - $s_top - $now_height) < 100) jsonajax();
});
//做一个ajax方法来请求data.php不断的获取数据
var $num = 0;
function jsonajax(){
$.ajax({
url:'data.php',
type:'POST',
data:"num="+$num++,
dataType:'json',
success:function(json){
if(typeof json == 'object'){
var neirou,$row,iheight,temp_h;
for(var i=0,l=json.length;i<l;i++){
neirou = json[i]; //当前层数据
//找了高度最少的列做添加新内容
iheight = -1;
$("#stage li").each(function(){
//得到当前li的高度
temp_h = Number($(this).height());
if(iheight == -1 || iheight >temp_h){
iheight = temp_h;
$row = $(this); //此时$row是li对象了
}
});
$item = $('<div><img src="'+neirou.img+'" border="0" ><br/>'+neirou.title+'</div>').hide();
$row.append($item);
$item.fadeIn();
}
}
}
});
}
/*
* CSS文件：waterfall.css
*/
body{text-align:center;}
/*Download by http://www.php100.com*/
#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; }
/*
* php文件：data.php
*/
<?php
$link = mysql_connect("localhost","root","");
$sql = "use waterfall";
mysql_query($sql,$link);
$sql = "set names utf8";
mysql_query($sql,$link);
$num = $_POST['num'] *10;
if($_POST['num'] != 0) $num +1;
$sql = "select img,title from content limit ".$num.",10";
$result = mysql_query($sql,$link);
$temp_arr = array();
while($row = mysql_fetch_assoc($result)){
$temp_arr[] = $row;
}
$json_arr = array();
foreach($temp_arr as $k=>$v){
$json_arr[] = (object)$v;
}
//print_r($json_arr);
echo json_encode( $json_arr );
瀑布流效果是WEB前端开发中比较流行的趋势，它的实现主要需要计算滚动条当前所在的位置，如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据。
本例呢需要建立数据库(本例中我们把它命名为waterfall)和数据表(本例中我们把它命名为content)
首先上效果图：
本例是对数据库简单的调用因此我的表结构式这样的：
- --
- -- 数据库: `waterfall`
- --
- -- --------------------------------------------------------
- --
- -- 表的结构 `content`
- --
- CREATE TABLE IF NOT EXISTS `content` (
- `id` int(10) NOT NULL AUTO_INCREMENT,
- `img` mediumtext NOT NULL,
- `title` varchar(50) NOT NULL,
- PRIMARY KEY (`id`)
- ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=179 ;
WEB前端开发 瀑布流效果的html代码如下：
- <ul id="stage">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
其中用到的样式文件：
- <style>
- body{text-align:center;}
- #stage{ margin:0 auto; padding:0; }
- #stage li{ margin:0; padding:0; list-style:none;float:left; width:230px;}
- #stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; }
- </style>
WEB前端瀑布流的实现主要依靠Jquery代码来完成，包括ajax数据的调用，它的代码如下：
- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
- <script>
- /*
- * 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_height - $s_top - $now_height) < 100) jsonajax();
- });
- //做一个ajax方法来请求data.php不断的获取数据
- var $num = 0;
- function jsonajax(){
- $.ajax({
- url:'data.php',
- type:'POST',
- data:"num="+$num++,
- dataType:'json',
- success:function(json){
- if(typeof json == 'object'){
- var neirou,$row,iheight,temp_h;
- for(var i=0,l=json.length;i<l;i++){
- neirou = json[i]; // //当前层数据
- //找了高度最少的列做添加新内容
- iheight = -1;
- $("#stage li").each(function(){
- //得到当前li的高度
- temp_h = Number($(this).height());
- if(iheight == -1 || iheight >temp_h){
- iheight = temp_h;
- $row = $(this); //此时$row是li对象了
- }
- });
- $item = $('<div style="text-align:center; line-height:26px;"><img src="'+neirou.img+'" width="220px" border="0" ><br/>'+neirou.title+'</div>').hide();
- $row.append($item);
- $item.fadeIn();
- }
- }
- }
- });
- }
- </script>
动态数据库读取文件data.php代码:
- <?php
- $link = mysql_connect("localhost","root","");
- $sql = "use waterfall";
- mysql_query($sql,$link);
- $sql = "set names utf8";
- mysql_query($sql,$link);
- $num = $_POST['num'] *1;
- if($_POST['num'] != 0) $num +1;
- $sql = "select img,title from content limit ".$num.",1";
- $result = mysql_query($sql,$link);
- $temp_arr = array();
- while($row = mysql_fetch_assoc($result)){
- $temp_arr[] = $row;
- }
- $json_arr = array();
- foreach($temp_arr as $k=>$v){
- $json_arr[] = (object)$v;
- }
- //print_r($json_arr);
- echo json_encode( $json_arr );
- ?>
哦了，其实WEB前端瀑布流效果的显示还是很简单的，会应用jquery创建添加元素会ajax异步应用即可，剩下的就是简单的数据库调用了，当然了本例子还不够完善，不能自适应窗口，但是不能否认它是初学瀑布流的一个入门的好实例
专注WEB前端开发，关注用户体验 希望高手多多指点