ajax/php/javascript实现图片瀑布、搜索、点小图放大图的综合结果

最新推荐文章于 2022-07-10 20:34:33 发布

less_cold

最新推荐文章于 2022-07-10 20:34:33 发布

阅读量503

点赞数

分类专栏： ajax和php

本文链接：https://blog.csdn.net/less_cold/article/details/52381592

版权

ajax和php 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html代码如下

这里有一个小知识点，就是如果引号层数太多，要用"代替引号

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>很多图片的</title>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="venobox/venobox.min.js"></script>
<link href="pagebar.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="bootstrap.css" type="text/css"/>
<link rel="stylesheet" href="venobox/venobox.css" type="text/css"/>
<link rel="stylesheet" href="venobox/demo.css" type="text/css"/>
</head>
<body>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>      
<div class="container">
<div><input type="text" id="gover_search_key" placeholder="请输入关键词直接搜索"/>
<button type="submit" οnclick="search()">搜索</button>
</div>
<div id="container" class="rows">
</div></div>
<script type="text/javascript">
var keyword="";
str=12;
$(function(){
    str=12;
	$.ajax({
                type: "GET", 
                url: 'mpicture.php', 
				dataType: "json", //数据格式:JSON
				data: {'page':str,'keyword':keyword
                },
                success: function (data) {
				var html='';
				var path1=eval(data)[0];
				for(i=0;i<12;i++){//这里的12是一页显示多少张图片
				  html = html+'<div class="col-md-3 text-center"><img id="'+eval(data)[3][i]+'"src="'+eval(data)[0][i]+'"style="height:200px,width:200px" οnclick="imgShow("#outerdiv","#innerdiv","#bigimg","#'+eval(data)[3][i]+'")"/><p>'+eval(data)[2][i]+'</p></div>';
				  }
				  $("#container").append(html);				
				}
			});  
}).scroll(function(){	
				var scrollTop = document.body.scrollTop+document.documentElement.scrollTop;//对象最顶端和窗口中可见内容的最顶端之间的距离，这两个值只有一个会生效
				if (scrollTop >=$(document).height()-$(window).height()) {
				str=str+4;
				//alert(keyword);
					window.onscroll = null;//为防止重复执行，先清除事件 
					$.ajax({type: "GET", 
							url: 'mpicture.php', 
							dataType: "json", //数据格式:JSON
							data: {'page':str,'keyword':keyword
							},
							success: function (data) {
				var html='';
				path1=eval(data)[0];
				title=eval(data)[2];
				id=eval(data)[3];
				allnum=eval(data)[4][0];
				inum=4;
				if(str>allnum){inum=allnum%4;}
				//inum=4;
				//alert(inum);
				for(i=0;i<inum;i++){//这里的2是一页显示多少条
				  html = html+'<div class="col-md-3 text-center"><img id="'+id[i]+'" src="'+path1[i]+'"style="height:200px,width:200px" οnclick="imgShow("#outerdiv","#innerdiv","#bigimg","#'+id[i]+'")"><p>'+title[i]+'</p></div>';
				  }
				  $("#container").append(html);
							}
					}
					)
				}
				})
function search(){
	keyword=$("#gover_search_key").val();
	str=12;
	$.ajax({
		type:"GET",
		url:'mpicture.php', 
		dataType:"json", 
		data:{'keyword':keyword,'page':str
		},
		success: function (data) {
		//alert("test");
				var html='';
				var path1=eval(data)[0];
				inum=12;
				if(inum>eval(data)[4][0])
				{inum=eval(data)[4][0];}
				for(i=0;i<inum;i++){
				  html = html+'<div class="col-md-3 text-center"><img id="'+eval(data)[3][i]+'"src="'+eval(data)[0][i]+'"style="height:200px,width:200px" οnclick="imgShow("#outerdiv","#innerdiv","#bigimg","#'+eval(data)[3][i]+'")"/><p>'+eval(data)[2][i]+'</p></div>';
				  }
				 $("#container").html(html);
					
		}
	}
	)
}
function imgShow(outerdiv, innerdiv, bigimg,id){
	//alert("test");
    var src = $(id).attr("src");//获取当前点击的pimg元素中的src属性  
	//alert(src);	
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
  
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
    $("<img/>").attr("src", src).load(function(){  
        var windowW = $(window).width();//获取当前窗口宽度 
		//alert(windowW);
        var windowH = $(window).height();//获取当前窗口高度  
        var realWidth = this.width;//获取图片真实宽度  
        var realHeight = this.height;//获取图片真实高度  
        var imgWidth, imgHeight;  
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
          
        if(realHeight>windowH*scale) {//判断图片高度  
            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                imgWidth = windowW*scale;//再对宽度进行缩放  
            }  
        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
        } else {//如果图片真实高度和宽度都符合要求，高宽不变  
            imgWidth = realWidth;  
            imgHeight = realHeight;  
        }  
                $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
          
        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
        var h = (windowH-imgHeight)/20;//计算图片与窗口上边距  
        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
    });  
      
    $(outerdiv).click(function(){//再次点击淡出消失弹出层  
        $(this).fadeOut("fast");  
    }); 
}	
</script>
</body>
</html>

php代码如下

<?php
header('Content-type:text/json; charset=utf-8');
@ $db = mysqli_connect('localhost','root','');
mysqli_query($db,"set names utf8;");
mysqli_select_db($db,'mpicture');//找到数据库mpicture
if(mysqli_connect_errno()){
 echo "Error:Could not connect to mysqli database.";
 exit;
}
$page=$_GET['page'];
$keyword=$_GET['keyword'];
$q="SELECT count(*) FROM picture where title like '%$keyword%'";
$result1 = mysqli_query($db,$q);
$row1 = mysqli_fetch_array($result1);
$allnum=$row1[0];
if($page){
if($page==12){
$a=0;
$b=$page;
$p="SELECT * FROM picture where title like '%$keyword%' limit $a,$b;";//对表picture进行选择
}else{
	if($page>$allnum){$b=$allnum;}else{	$b=4;}
	$a=$page-4;
	$p="SELECT * FROM picture where title like '%$keyword%' limit $a,$b;";
}
}
//if($keyword){
	//$p="SELECT * FROM picture like $keyword;";
//}
$result = mysqli_query($db,$p);//执行$p的mysql语句，并赋给result
$rownum = mysqli_num_rows($result);//获取result的数据数量
$picture=array(array());
for($i=0;$i<$rownum;$i++){
    $row = mysqli_fetch_assoc($result);//获取result的一条数据
	$picture[0][$i]= $row['path1'];//获得缩略图的路径
	$picture[1][$i]= $row['path2'];//获得全图的路径
	$picture[2][$i]= $row['title'];//获得文字描
	$picture[3][$i]= $row['Id'];
}
$picture[4][0]=$allnum;
echo json_encode($picture);
?>

less_cold

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax/php/javascript实现图片瀑布、搜索、点小图放大图的综合结果

html代码如下这里有一个小知识点，就是如果引号层数太多，要用"代替引号很多图片的搜索var keyword="";str=12;$(function(){ str=12; $.ajax({ type: "GET", url: 'mpi
复制链接

扫一扫