作者:怡伶心怡67 | 来源:互联网 | 2018-05-15 07:16
大家在用这个东西的时候一定要计得有这么几个文件,一个是jquery.js还有就是你自己数据库的密码。和相对应的图片才可以正常看到效果。下面就是这里所有的代码!!!HTML文件:waterfall.html!DOCTYPEhtmlPUBLIC-W3CDTDXHTML1.0TransitionalEN
大家在用这个东西的时候一定要计得有这么几个文件,一个是jquery.js 还有就是你自己数据库的密码。和相对应的图片才可以正常看到效果。下面就是这里所有的代码!!!HTML文件:waterfall.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
大家在用这个东西的时候一定要计得有这么几个文件,一个是jquery.js 还有就是你自己数据库的密码。和相对应的图片才可以正常看到效果。下面就是这里所有的代码!!!
HTML文件:waterfall.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();
});
&#160;
&#160;
//做一个ajax方法来请求data.php不断的获取数据
var $num = 0;
function jsonajax(){
&#160;
$.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
temp_h){
iheight = temp_h;
$row = $(this); //此时$row是li对象了
}
});
$item = $('
'+neirou.title+'
').hide();
$row.append($item);
$item.fadeIn();
}
}
}
});
}
&#160;
/*
* CSS文件:waterfall.css
*/
&#160;
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 p{ font-size:12px; padding:10px; color:#999999; text-align:left; }
&#160;
&#160;
/*
* php文件:data.php
*/
$v){
$json_arr[] = (object)$v;
}
//print_r($json_arr);
echo json_encode( $json_arr );
原文地址:php/mysql/jquery实现各系统流行的瀑布流显示方式,实现很简单的!!!!, 感谢原作者分享。