jquery+ajax+mysql+php上拉加载瀑布流效果或者jquery+ajax+mysql+php滚动条向下滚动瀑布流效果加载

来源：互联网发布：淘宝十年产品事扫描编辑：程序博客网时间：2024/06/05 11:01

index.html代码：

<!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" /><meta name="keywords" content="ajax分页,jquery,php" /><meta name="description" content="jquery+ajax+msql+php上拉加载或者jquery+ajax+msql+php滚动条向下滚动加载" /><title>jquery+ajax+msql+php上拉加载或者jquery+ajax+msql+php滚动条向下滚动加载</title><style type="text/css">body{width:100%;height:auto;margin:0;padding:0;}#main{width:100%;margin:0 auto;height:auto;text-align:center}.nodata{width:100%;height:auto;}#list ul li{width:80%; height:260px; margin:20px;display:inline-block;}#list ul li img{width:220px; height:220px}#list ul li p{line-height:22px}#nodata{width:120px; height:32px; line-height:32px; border:1px solid #d3d3d3; left:42%; text-align:center; background:#f7f7f7 url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}</style><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">var curPage = 1; //当前页码var total,pageSize,totalPage;//获取数据function getData(page){ $.ajax({type: 'POST',url: '02.php',data: {'pageNum':page-1},dataType:'json',afterSend:function(){$("#list").append("<li id='loading'>loading</li>");},success:function(json){//$("#list ul").empty();total = json.total; //总记录数pageSize = json.pageSize; //每页显示条数curPage = page; //当前页totalPage = json.totalPage; //总页数var li = "";var list = json.list;$.each(list,function(index,array){ //遍历json数据列li += "<li><a href='#'><img src=../"+array['img']+">"+array['title']+"</a></li>";});$("#list ul").append(li);},complete:function(){ //生成分页条//getPageBar();},error:function(){alert("数据加载失败");}});}//获取分页条function getPageBar(){//页码大于最大页数if(curPage>totalPage) curPage=totalPage;//页码小于1if(curPage<1) curPage=1;pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";//如果是第一页if(curPage==1){pageStr += "<span>首页</span><span>上一页</span>";}else{pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";}//如果是最后页if(curPage>=totalPage){pageStr += "<span>下一页</span><span>尾页</span>";}else{pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";}$("#pagecount").html(pageStr);}</script><script type="text/javascript">getData(1);var i = 1;        $(document).ready(function() {            $(window).scroll(function() {if(totalPage-i>0){//滚动条到达底部加载if ($(document).scrollTop() >= $(document).height() - $(window).height()) {if(totalPage-i>0){setTimeout(function() { $('#list').append(getData(i));}, 200); i++;}}}else{$(".nodata").html("没有更多数据了...");setTimeout(function() { $(".nodata").hide();}, 3000); }            });        });</script></head><body><div id="main">     <div id="list">    <ul></ul>    </div>   <div class="nodata"><img src="loading2.gif"/></div></div><script type="text/javascript"> </script> </body></html>

如果还有条件传递参数查询：

可以这样子写法;

var t=626;
var curPage = 1; //当前页码
var total,pageSize,totalPage;
//获取数据
function getData(page){
$.ajax({
type: 'POST',
url: '05.php',
data: {'pageNum':page-1,'t':t},

02.php代码

<?php include("config.php");   $page = intval($_POST['pageNum']);  $t = intval($_POST['t']);  if($t!=""){$wsq=" where type='$t' ";}else{$wsq="";} $sql2 = "select id from data_product $wsq"; $result = mysqli_query($conn, $sql2); $total = mysqli_num_rows($result);//总记录数 //$result = mysql_query("select id from food");  //$total = mysql_num_rows($result);//总记录数    $pageSize = 5; //每页显示数  $totalPage = ceil($total/$pageSize); //总页数    $startPage = $page*$pageSize;  $arr['total'] = $total;  $arr['pageSize'] = $pageSize;  $arr['totalPage'] = $totalPage;  //$query = mysql_query("select id,title,pic from food order by id asc limit $startPage,$pageSize");  //while($row=mysql_fetch_array($query)){  $sql = "select id,title,img from data_product $wsq order by id desc limit $startPage,$pageSize"; $query = mysqli_query($conn, $sql); while($row = mysqli_fetch_assoc($query)) {     $arr['list'][] = array(          'id' => $row['id'],          'title' => $row['title'],          'img' => $row['img'],       );  }  //print_r($arr);  echo json_encode($arr); ?>

config.php

header("Content-type: text/html;charset=utf-8");$servername = "localhost";$username = "root";$password = "root";$dbname = "ovanxcom";$db_md5 = "cms20170711";//加上保密// 创建连接$conn = new mysqli($servername, $username, $password, $dbname);// 检测连接if ($conn->connect_error) {    die("连接失败: " . $conn->connect_error);}     /* Close the connection 关闭连接*/        // mysqli_close($conn);     date_default_timezone_set('prc');//时区问题，php环境默认时差与北京时间相差8小时，我们要想获取正确的时间就必须设置在PHP文件开始处 加上date_default_timezone_set('prc');

引用：http://blog.csdn.net/qq_20214777/article/details/45197373

阅读全文

0 0