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)
首先上效果图:

本例是对数据库简单的调用因此我的表结构式这样的:

  1. --
  2. -- 数据库: `waterfall`
  3. --
  4. -- --------------------------------------------------------
  5. --
  6. -- 表的结构 `content`
  7. --
  8. CREATE TABLE IF NOT EXISTS `content` (
  9. `id` int(10) NOT NULL AUTO_INCREMENT,
  10. `img` mediumtext NOT NULL,
  11. `title` varchar(50) NOT NULL,
  12. PRIMARY KEY (`id`)
  13. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=179 ;

WEB前端开发 瀑布流效果的html代码如下:

  1. <ul id="stage">
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. </ul>

其中用到的样式文件:

  1. <style>
  2. body{text-align:center;}
  3. #stage{ margin:0 auto; padding:0; }
  4. #stage li{ margin:0; padding:0; list-style:none;float:left; width:230px;}
  5. #stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; }
  6. </style>

WEB前端瀑布流的实现主要依靠Jquery代码来完成,包括ajax数据的调用,它的代码如下:

  1. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
  2. <script>
  3. /*
  4. * Javascript文件:waterfall.js
  5. */
  6. $(function(){
  7. jsonajax();
  8. });
  9. //这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据
  10. $(window).scroll(function(){
  11. //此方法是在滚动条滚动时发生的函数
  12. // 当滚动到最底部以上100像素时,加载新内容
  13. var $doc_height,$s_top,$now_height;
  14. $doc_height = $(document).height(); //这里是document的整个高度
  15. $s_top = $(this).scrollTop(); //当前滚动条离最顶上多少高度
  16. $now_height = $(this).height(); //这里的this 也是就是window对象
  17. if(($doc_height - $s_top - $now_height) < 100) jsonajax();
  18. });
  19. //做一个ajax方法来请求data.php不断的获取数据
  20. var $num = 0;
  21. function jsonajax(){
  22. $.ajax({
  23. url:'data.php',
  24. type:'POST',
  25. data:"num="+$num++,
  26. dataType:'json',
  27. success:function(json){
  28. if(typeof json == 'object'){
  29. var neirou,$row,iheight,temp_h;
  30. for(var i=0,l=json.length;i<l;i++){
  31. neirou = json[i]; // //当前层数据
  32. //找了高度最少的列做添加新内容
  33. iheight = -1;
  34. $("#stage li").each(function(){
  35. //得到当前li的高度
  36. temp_h = Number($(this).height());
  37. if(iheight == -1 || iheight >temp_h){
  38. iheight = temp_h;
  39. $row = $(this); //此时$row是li对象了
  40. }
  41. });
  42. $item = $('<div style="text-align:center; line-height:26px;"><img src="'+neirou.img+'" width="220px" border="0" ><br/>'+neirou.title+'</div>').hide();
  43. $row.append($item);
  44. $item.fadeIn();
  45. }
  46. }
  47. }
  48. });
  49. }
  50. </script>

动态数据库读取文件data.php代码:

  1. <?php
  2. $link = mysql_connect("localhost","root","");
  3. $sql = "use waterfall";
  4. mysql_query($sql,$link);
  5. $sql = "set names utf8";
  6. mysql_query($sql,$link);
  7. $num = $_POST['num'] *1;
  8. if($_POST['num'] != 0) $num +1;
  9. $sql = "select img,title from content limit ".$num.",1";
  10. $result = mysql_query($sql,$link);
  11. $temp_arr = array();
  12. while($row = mysql_fetch_assoc($result)){
  13. $temp_arr[] = $row;
  14. }
  15. $json_arr = array();
  16. foreach($temp_arr as $k=>$v){
  17. $json_arr[] = (object)$v;
  18. }
  19. //print_r($json_arr);
  20. echo json_encode( $json_arr );
  21. ?>

哦了,其实WEB前端瀑布流效果的显示还是很简单的,会应用jquery创建添加元素会ajax异步应用即可,剩下的就是简单的数据库调用了,当然了本例子还不够完善,不能自适应窗口,但是不能否认它是初学瀑布流的一个入门的好实例
专注WEB前端开发,关注用户体验 希望高手多多指点


你可能感兴趣的:(php+mysql+jquery瀑布流的实现)