php/mysql/jquery实现各系统流行的瀑布流显示方式，实现很简单的哈！！！！

大家在用这个东西的时候一定要计得有这么几个文件，一个是jquery.js 还有就是你自己数据库的密码。和相对应的图片才可以正常看到效果。下面就是这里所有的代码！！！
HTML文件：waterfall.html
  1 View Code 
  2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3  <html xmlns="http://www.w3.org/1999/xhtml">
  4  <head>
  5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6  <title>瀑布流-Derek</title>
  7  <script type="text/javascript" language="javascript" src="jquery.js"></script>
  8  <link type="text/css" rel="stylesheet" href="waterfall.css" />
  9  <script type="text/javascript" language="javascript" src="waterfall.js"></script>
 10  </head>
 11  <body>
 12  
 13      <ul id="stage">
 14          <li></li>
 15          <li></li>
 16          <li></li>
 17          <li></li>
 18      </ul>
 19  
 20  </body>
 21  </html>
 22 /*
 23  *  Javascript文件：waterfall.js
 24  */
 25 $(function(){
 26      jsonajax();
 27  });
 28  
 29  //这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据
 30  $(window).scroll(function(){    
 31      //此方法是在滚动条滚动时发生的函数
 32      // 当滚动到最底部以上100像素时，加载新内容
 33      var $doc_height,$s_top,$now_height;
 34      $doc_height = $(document).height();        //这里是document的整个高度
 35      $s_top = $(this).scrollTop();            //当前滚动条离最顶上多少高度
 36      $now_height = $(this).height();            //这里的this 也是就是window对象
 37      if(($doc_height - $s_top - $now_height) < 100) jsonajax();    
 38  });
 39  
 40  
 41  //做一个ajax方法来请求data.php不断的获取数据
 42  var $num = 0;
 43  function jsonajax(){
 44      
 45      $.ajax({
 46          url:'data.php',
 47          type:'POST',
 48          data:"num="+$num++,
 49          dataType:'json',
 50          success:function(json){
 51              if(typeof json == 'object'){
 52                  var neirou,$row,iheight,temp_h;
 53                  for(var i=0,l=json.length;i<l;i++){
 54                      neirou = json[i];    //当前层数据
 55                      //找了高度最少的列做添加新内容
 56                      iheight  =  -1;
 57                      $("#stage li").each(function(){
 58                          //得到当前li的高度
 59                          temp_h = Number($(this).height());
 60                          if(iheight == -1 || iheight >temp_h){
 61                              iheight = temp_h;
 62                              $row = $(this); //此时$row是li对象了
 63                          }
 64                      });
 65                      $item = $('<div><img src="'+neirou.img+'" border="0" ><br/>'+neirou.title+'</div>').hide();
 66                      $row.append($item);
 67                      $item.fadeIn();
 68                  }
 69              }
 70          }
 71      });
 72  }
 73 
 74 /*
 75  *  CSS文件：waterfall.css
 76  */
 77 
 78 body{text-align:center;}
 79 /*Download by http://www.codefans.net*/
 80 #stage{ margin:0 auto; padding:0; 880px; }
 81 #stage li{ margin:0; padding:0; list-style:none;float:left; 220px;}
 82 #stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; }
 83 
 84 
 85 /*
 86  *  php文件：data.php
 87  */
 88 <?php
 89  $link = mysql_connect("localhost","root","");
 90  $sql = "use waterfall";
 91  mysql_query($sql,$link);
 92  $sql = "set names utf8";
 93  mysql_query($sql,$link);
 94  $num = $_POST['num'] *10;
 95  if($_POST['num'] != 0) $num +1;
 96  $sql = "select img,title from content limit ".$num.",10";
 97  $result = mysql_query($sql,$link);
 98  $temp_arr = array();
 99  while($row = mysql_fetch_assoc($result)){
100      $temp_arr[] = $row;
101  }
102  $json_arr = array();
103  foreach($temp_arr as $k=>$v){
104      $json_arr[]  = (object)$v;
105  }
106  //print_r($json_arr);
107  echo json_encode( $json_arr );