Home > php教程 > php手册 > php/mysql/jquery实现各系统流行的瀑布流显示方式

php/mysql/jquery实现各系统流行的瀑布流显示方式

WBOY
Release: 2016-06-21 08:51:29
Original
1096 people have browsed it

 

 

 

 

 

 

 

瀑布流-Derek for PHP100.com

 

 

 

 

 

 

     

             

  •          

  •          

  •          

  •      

 

 

 

/*

 *  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)

 });

 

 

 //做一个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

                     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 = $('

php/mysql/jquery实现各系统流行的瀑布流显示方式
'+neirou.title+'
').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

 */

 $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 );



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template