当前访客身份:游客 [ 登录 | 加入开源中国 ]

代码分享

当前位置:
代码分享 » PHP  » 网页设计与交互
分享到: 
收藏 +0
1

大家在用这个东西的时候一定要计得有这么几个文件,一个是jquery.js 还有就是你自己数据库的密码。和相对应的图片才可以正常看到效果。下面就是这里所有的代码!!!

HTML文件:waterfall.html

标签: PHP

代码片段(2) [全屏查看所有代码]

1. [代码][PHP]代码     跳至 [1] [全屏预览]

View Code 
 <!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</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.codefans.net*/
#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 );

2. [文件] waterfall.zip ~ 8KB     下载(1050)     [全屏预览]



开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(14)

  • 1楼:和雨冰风 发表于 2012-07-24 14:42 回复此评论
    数据库呢???
  • 2楼:开源中国最帅没有之一 发表于 2012-07-25 02:45 回复此评论
    这个不错 学习了
  • 3楼:derek718 发表于 2012-07-25 09:47 回复此评论

    引用来自“和雨冰风”的评论

    数据库呢???
    数据库内容就是一个图片的地址如:images/1.gif 还有就是标题:title字段。 好吧! 我把测试数据也发上来。
  • 4楼:和雨冰风 发表于 2012-07-25 14:36 回复此评论
    还有一个问题,不明白你到底写这个代码是什么意思
  • 5楼:derek718 发表于 2012-07-25 14:43 回复此评论

    引用来自“和雨冰风”的评论

    还有一个问题,不明白你到底写这个代码是什么意思
    呵呵 很简单,你到www.bing.com里随便打个东西搜索一下。你就知道了。
  • 6楼:一行 发表于 2012-07-30 08:42 回复此评论
    支持下!正准备用瀑布流加到个人项目里面!
  • 7楼:一行 发表于 2012-07-30 08:48 回复此评论
    兄弟!转载没什么事情,但是最好还是把出自写下,别到时候引来是非!
  • 8楼:larkim 发表于 2012-07-30 13:44 回复此评论
    非常实用,正在找这效果!
  • 9楼:四根毛 发表于 2012-08-13 09:12 回复此评论
    你这样子是有问题的,用 $(window).scroll来触发ajax 你有没有想过 当你一直在不停地向下拖拽滚动条,一旦达到了触发ajax的条件,而我继续往下拉,会一连发送多个重复的ajax请求,而这些重复的请求中,只有一个才是用得到的,建议你将 $(window).scroll换成 windows自动执行jssetInterval,时间可以设置为2000毫秒自动执行一次,同时,如果服务器响应慢,这2000毫秒内仍然可能会没有得到服务器响应的返回值,从而再次发送重复的ajax,你需要在静态页声明一个标识,用作判断这次的请求是否同上次的请求重复
  • 10楼:yzw杨 发表于 2012-08-23 12:33 回复此评论
    请问一下,那个jq的话我输入你上面这两句话,为什么在前台不能够显示出内容的呢? type:'POST' ,
    048          data:"num="+$num++,
  • 11楼:猪猪家的 发表于 2012-11-27 16:42 回复此评论
    怎么没有分页呢
  • 12楼:babsoft 发表于 2013-01-27 08:44 回复此评论
    不要上当:里面的是:waterfall.sql   假的。晕
  • 13楼:mocker 发表于 2014-02-09 10:30 回复此评论
    还不错,就是少了一个分页,如果有分页就完美了
  • 14楼:赵洋0031 发表于 2014-03-05 11:27 回复此评论
    为什么我用360浏览器,卡了一下。马上加载了好多好多呢。是不是服务器反应慢啊。
    哪位大神改进一下啊