jq.ajax+php+mysql实现瀑布流缓冲加载数据

最新推荐文章于 2023-04-17 09:35:04 发布
最新推荐文章于 2023-04-17 09:35:04 发布
阅读量1.8k 收藏 5
点赞数 1
分类专栏： ajax+php+mysql 文章标签： 功能 javascript ajax php mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjw453321854/article/details/78881916
版权

效果图如下：




html+css代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流展示数据</title>
<style type="text/css">
*{padding:0;margin:0;}
body{padding:0;margin:0;background:#ddd;}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}

#wrap{width:auto;height:auto;margin:0 auto;position:relative;}
#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
#wrap .box .info .pic img{width:260px;border-radius:3px;}
#wrap .box .info .title{width:260px;height:30px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:12px;font-weight:bold;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}
#wrap .box .info .sale{width:250px;height:30px;line-height:30px;margin:10px auto 0;padding-bottom:10px;}
#wrap .box .info .sale label{display:inline-block;font-weight:bold;font-size:14px;margin-left:10px;}
#wrap .box .info .sale span{font-size:14px;color:#ff0036;}
#wrap .box .info .sale button{width:60px;height:25px;line-height:20px;font-size:12px;background:#ff0036;color:#fff;border-radius:5px;display:inline-block;float:right;margin-top:5px;outline:none;cursor:pointer;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>
<body>
<center>
	<h2>瀑布流展示数据</h2>
</center>

	<div id="wrap">
	
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1UQTWXjlhXXa0TSA._083409.jpg_b.jpg"></div>
				<div class="title"><a href="#">新货 核桃 新疆大核桃 阿克苏薄皮核桃 仁很饱满【巴扎20度C】</a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1XLbSXkFfXXaWt5AT_011948.jpg_b.jpg"></div>
				<div class="title"><a href="#">100%正宗 新疆库尔勒香梨 95元/箱15斤毛重 江浙沪包邮 新鲜 水果</a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1BvJPXX4yXXad.nIW_024727.jpg_b.jpg"></div>
				<div class="title"><a href="#">新疆特产特级大个开心果250克 自然开口颗粒饱满 满2斤包邮</a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1FUViXldEXXcf9moW_024549.jpg_b.jpg"></div>
				<div class="title"><a href="#">店庆一袋包邮晋谷香新疆和田壶瓶枣一级玉枣红枣批发山西大枣500g</a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
	
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img03.taobaocdn.com/bao/uploaded/i3/T15hYMXmtXXXcklKTb_123629.jpg_b.jpg"></div>
				<div class="title"><a href="#">新疆野生肉苁蓉 大芸250克 沙漠人参</a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img03.taobaocdn.com/bao/uploaded/i7/T1xoqfXaJsXXcUtHja_120240.jpg_b.jpg"></div>
				<div class="title"><a href="#">新疆特产 特级开口小银杏仁500g 杏核 野生饱满坚果干果 2斤包邮</a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img01.taobaocdn.com/bao/uploaded/i1/T17x_ZXjFlXXaau978_071645.jpg_b.jpg"></div>
				<div class="title"><a href="#">美国大杏核 纸皮 香脆可口 粒粒饱满 休闲零食首选</a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1.gT2XjFhXXcJGKE._111803.jpg_b.jpg"></div>
				<div class="title"><a href="#">湖南特产湘莲子\12年寸三莲2件包邮\农家自种纯天然\特级白莲450g </a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1B0CzXllkXXa_ca7T_010708.jpg_b.jpg"></div>
				<div class="title"><a href="#">新疆风特产小吃特级果干冰梅冰凉梅子休闲食品孕妇零食满200包邮 </a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
		
		<div class="box">
			<div class="info">
				<div class="pic"><img src="http://img01.taobaocdn.com/bao/uploaded/i1/T12dzXXbVcXXbjanLb_095349.jpg_b.jpg"></div>
				<div class="title"><a href="#">湖南特产白鹤铁板鸡蛋煎饼早餐饼 500g称重 比Tipo面包干好吃N倍 </a></div>
				<div class="sale"><label>价格：</label><span>5/kg</span><label>库存：</label><span>9999</span><button>购买</button></div>
			</div>
		</div>
	
	</div>

</body>
</html>
js代码 

window.onload = function(){
	//运行瀑布流主函数,默认加载
	PBL('wrap','box');	

	var page=1;

	window.onscroll = function(){
		
	 if( getCheck() ) {

		if(page>5){
				return false;
			}else{
				page++;
				getAjax(page);		
			
			}
		}

	}
			
}	
//获取数据库数据		
function getAjax(page){
	$.ajax({
		type: 'POST',
		data:{'page':page},
		url: 'fall.php',
		dataType:'json',
		success:function(data){
		console.log(data);

		var wrap = document.getElementById('wrap');
		for(i in data){
			//创建box
			var box = document.createElement('div');
			box.className = 'box';
			wrap.appendChild(box);
			//创建info
			var info = document.createElement('div');
			info.className = 'info';
			box.appendChild(info);
			//创建pic
			var pic = document.createElement('div');
			pic.className = 'pic';
			info.appendChild(pic);
			//创建img
			var img = document.createElement('img');
			img.src =data[i].pic;
			img.style.height = 'auto';
			pic.appendChild(img);
			//创建title
			var title = document.createElement('div');
			title.className = 'title';
			info.appendChild(title);
			//创建a标记
			var a = document.createElement('a');
			a.innerHTML = data[i].title;
			title.appendChild(a);
			//创建div
			var sale= document.createElement('div');
			sale.className='sale';
			info.appendChild(sale);
			//创建价格
			var label1= document.createElement('label');
			label1.innerHTML="价格：";
			sale.appendChild(label1);
			var span1= document.createElement('span');
			span1.innerHTML=data[i].price;
			sale.appendChild(span1);
			//创建库存
			var label2= document.createElement('label');
			label2.innerHTML="库存：";
			sale.appendChild(label2);
			var span2= document.createElement('span');
			span2.innerHTML=data[i].num;
			sale.appendChild(span2);
			//创建购买btn
			var btn= document.createElement('button');
			btn.innerHTML="购买";
			sale.appendChild(btn);
				
		}
		PBL('wrap','box');
		
		},
		error:function(){
			alert("数据加载出错")

		}


	});	

}
	
//瀑布流主函数
function PBL(wrap,box){
	//	获得外层以及每一个box
	var wrap = document.getElementById(wrap);
	var boxs  = getClass(wrap,box);
	//	获得屏幕可显示的列数
	var boxW = boxs[0].offsetWidth;
	var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
	wrap.style.width = boxW*colsNum+'px';//为外层赋值宽度
	//	循环出所有的box并按照瀑布流排列
	var everyH = [];//定义一个数组存储每一列的高度
	for (var i = 0; i < boxs.length; i++) {
		if(i<colsNum){
			everyH[i] = boxs[i].offsetHeight;
		}else{
			var minH = Math.min.apply(null,everyH);//获得最小的列的高度
			var minIndex = getIndex(minH,everyH); //获得最小列的索引
			getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);
			everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度
		}
	}

}

//获取类元素,储存数组

function getClass(wrap,className){
	var obj = wrap.getElementsByTagName('*');
	var arr = [];
	for(var i=0;i<obj.length;i++){
		if(obj[i].className == className){
			arr.push(obj[i]);
		}
	}
	return arr;
}

// 获取最小列的索引

function getIndex(minH,everyH){
	for(index in everyH){
		if (everyH[index] == minH ) 
		return index;
	}
}

// 数据请求检验

function getCheck(){
	var scrollHeight = document.documentElement.scrollHeight //可视区的高度加上滚动的高度
	var clientHeight = document.documentElement.clientHeight //可视区的高度
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  //滚动条在Y轴上的滚动距离
	return scrollHeight == clientHeight + scrollTop ? true:false;
}

// 设置加载样式

var getStartNum = 0;//设置请求加载的条数的位置
function getStyle(box,top,left,index){
    if (getStartNum>=index) return;
    $(box).css({
    	'position':'absolute',
        'top':top,
        "left":left,
        "opacity":"0"
    });
    $(box).stop().animate({
        "opacity":"1"
    },999);
    getStartNum = index;//更新请求数据的条数位置
}

php代码

<?php 
$conn=new Mysqli($servername, $username, $password,dbname) 
if(!$conn){  
    echo "数据库连接错误!";exit;  
}  
mysqli_query($conn,"set names utf8");
$page=$_POST['page']; //获取前台请求的记录
$size=10;//每次请求的数据条数 
$start=($page-1)*10;//从几条开始求数据
$count=$conn->query("select id from foods")->num_rows;//记录总条数
$totalPage=ceil($count/$size);//记录可以请求的总次数
$result=$conn->query("select * from foods limit $start,$size");
while($row=mysqli_fetch_array($result)){  
    $datas[] = array("id"=>$row['id'],"title"=>$row['title'],"pic"=>$row['pic'],"price"=>$row['price'],"num"=>$row['num'],"count"=>$count,"totalPage"=>$totalPage);
}
echo json_encode($datas);
mysqli_close($conn);
?>
mysql数据库表 

-- 创建表

CREATE TABLE `foods` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `pic` varchar(255) NOT NULL,
  `price` varchar(32) NOT NULL,
  `num` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=61 DEFAULT CHARSET=utf8;


-- 导入表数据

insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('60','新货 核桃 新疆大核桃 阿克苏薄皮核桃 仁很饱满【巴扎20度C】','http://img02.taobaocdn.com/bao/uploaded/i2/T1UQTWXjlhXXa0TSA._083409.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('59','100%正宗 新疆库尔勒香梨 95元/箱15斤毛重 江浙沪包邮 新鲜 水果','http://img03.taobaocdn.com/bao/uploaded/i3/T1XLbSXkFfXXaWt5AT_011948.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('58','新疆特产特级大个开心果250克 自然开口颗粒饱满 满2斤包邮','http://img04.taobaocdn.com/bao/uploaded/i4/T1BvJPXX4yXXad.nIW_024727.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('57','店庆一袋包邮晋谷香新疆和田壶瓶枣一级玉枣红枣批发山西大枣500g','http://img03.taobaocdn.com/bao/uploaded/i3/T1FUViXldEXXcf9moW_024549.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('56','新疆野生肉苁蓉 大芸250克 沙漠人参','http://img03.taobaocdn.com/bao/uploaded/i3/T15hYMXmtXXXcklKTb_123629.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('55','新疆特产 特级开口小银杏仁500g 杏核 野生饱满坚果干果 2斤包邮','http://img03.taobaocdn.com/bao/uploaded/i7/T1xoqfXaJsXXcUtHja_120240.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('54','美国大杏核 纸皮 香脆可口 粒粒饱满 休闲零食首选','http://img01.taobaocdn.com/bao/uploaded/i1/T17x_ZXjFlXXaau978_071645.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('53','湖南特产湘莲子\\12年寸三莲2件包邮\\农家自种纯天然\\特级白莲450g ','http://img01.taobaocdn.com/bao/uploaded/i1/T1.gT2XjFhXXcJGKE._111803.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('52','新疆风特产小吃特级果干冰梅冰凉梅子休闲食品孕妇零食满200包邮 ','http://img01.taobaocdn.com/bao/uploaded/i1/T1B0CzXllkXXa_ca7T_010708.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('51','湖南特产白鹤铁板鸡蛋煎饼早餐饼 500g称重 比Tipo面包干好吃N倍 ','http://img01.taobaocdn.com/bao/uploaded/i1/T12dzXXbVcXXbjanLb_095349.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('50','湖南常德特产 原价35现价32元两只免邮 散装泰味酱板鸭 刚出炉的 ','http://img02.taobaocdn.com/bao/uploaded/i2/T1k1OWXdhdXXcbY.cU_015918.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('49','湖南特产 盐津铺子 香酥牛肉味兰花豆 蚕豆500克 4斤包邮 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1RO91XkhaXXch7OE6_062222.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('48','椒丝牛肉（四川特产自贡麻辣兔头/兔腿；缠丝兔；冷吃兔冷吃牛肉) ','http://img02.taobaocdn.com/bao/uploaded/i2/T1..5GXoxxXXalsP.1_041722.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('47','四川私房菜，特产小吃。味味妈妈秘制香辣牛蹄筋，透亮Q滑 ','http://img01.taobaocdn.com/bao/uploaded/i1/T1tx5EXlRnXXXlgy.6_062259.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('46','沈师傅鸡蛋干100g营养美味 四川特产 沈师傅鸡蛋干100克 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1KX6tXnJsXXcQC8k._112940.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('45','川香居 糖醋排骨 掌柜推荐 四川特产小吃零食 120g 满50包邮 ','http://img04.taobaocdn.com/bao/uploaded/i4/T16hPbXgJlXXbAIj.__080146.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('44','黄金香原味迷你猪肉脯56g 厦门特产 蜜汁猪肉干 中华老字号 零食 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1N19zXnxWXXXHy7g9_104229.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('43','淘金币 秒杀福建特产卤味风味小吃鸡爪洪濑红毛凤爪零食小吃团购 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1yKYTXdtoXXaCzp3._111208.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('42','厦门特产 香贡贡糖果牛味肉丁 XO牛味肉粒4份包邮 舌尖上的中国 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1cx23XetaXXauXCg8_071539.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('41','买就送茶叶品尝包 八克装 福建1725安溪铁观音清香型 乌龙茶 特级','http://img01.taobaocdn.com/bao/uploaded/i1/T1__L0XndiXXaeglI._113301.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('40','包邮 云南特产鲜花饼 玫瑰花饼 现烤 礼盒 500克10个装 花味源 ','http://img01.taobaocdn.com/bao/uploaded/i1/T1a3TDXdprXXbz9bZ._111445.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('39','云南特产 滇味堂白酥皮云腿月饼50克 火腿月饼 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1.5rBXmpdXXaO_HYc_125908.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('38','【良品铺子】牛肝菌烧烤味即食 云南特产野生食用菌 休闲干货零食 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1Qn12Xa0qXXXMZ1I._112111.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('37','正宗 一手店 熟食 猪蹄 猪手 猪爪 猪脚 东北特产黑龙江美食小吃 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1Gm14XblaXXbp4MTX_115322.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('36','哈尔滨红肠正宗秋林里道斯红肠500克真空包装东北特产小吃不限重 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1ZTVvXjddXXcunnU7_065822.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('35','琦丽山珍 干果新货 奶油味夏威夷果 澳洲坚果 零食特产 特价促销 ','http://img02.taobaocdn.com/bao/uploaded/i2/T1kdzpXolvXXbjUT7U_015907.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('34','【山尖百合】贵州传统小吃波波糖 原生态养颜食材 无蔗糖添加剂','http://img03.taobaocdn.com/bao/uploaded/i3/T1Bz1cXdldXXbtTV.2_043100.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('33','特价抢购中【飘零大叔】杂志推荐-蜜汁猪肉脯- 靖江特产 零食 250','http://img01.taobaocdn.com/bao/uploaded/i1/T1v4urXfJvXXaGmNcU_015023.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('32','杭梦 特价坚果新疆巴旦木 纸皮巴旦木龙果 薄壳大杏仁 4件包邮','http://img03.taobaocdn.com/bao/uploaded/i3/T1.gm3XcXkXXbzFJAU_014249.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('31','包邮1000克(500克*2袋) 新疆天生无壳 生南瓜子仁','http://img03.taobaocdn.com/bao/uploaded/i3/T19iYSXa0gXXbATxfa_121311.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('30','包邮1000克(500克*2袋) 新疆天生无壳 生南瓜子仁','http://img03.taobaocdn.com/bao/uploaded/i3/T19iYSXa0gXXbATxfa_121311.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('29','杭梦 特价坚果新疆巴旦木 纸皮巴旦木龙果 薄壳大杏仁 4件包邮','http://img03.taobaocdn.com/bao/uploaded/i3/T1.gm3XcXkXXbzFJAU_014249.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('28','特价抢购中【飘零大叔】杂志推荐-蜜汁猪肉脯- 靖江特产 零食 250','http://img01.taobaocdn.com/bao/uploaded/i1/T1v4urXfJvXXaGmNcU_015023.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('27','【山尖百合】贵州传统小吃波波糖 原生态养颜食材 无蔗糖添加剂','http://img03.taobaocdn.com/bao/uploaded/i3/T1Bz1cXdldXXbtTV.2_043100.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('26','琦丽山珍 干果新货 奶油味夏威夷果 澳洲坚果 零食特产 特价促销 ','http://img02.taobaocdn.com/bao/uploaded/i2/T1kdzpXolvXXbjUT7U_015907.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('25','哈尔滨红肠正宗秋林里道斯红肠500克真空包装东北特产小吃不限重 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1ZTVvXjddXXcunnU7_065822.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('24','正宗 一手店 熟食 猪蹄 猪手 猪爪 猪脚 东北特产黑龙江美食小吃 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1Gm14XblaXXbp4MTX_115322.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('23','【良品铺子】牛肝菌烧烤味即食 云南特产野生食用菌 休闲干货零食 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1Qn12Xa0qXXXMZ1I._112111.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('22','云南特产 滇味堂白酥皮云腿月饼50克 火腿月饼 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1.5rBXmpdXXaO_HYc_125908.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('21','包邮 云南特产鲜花饼 玫瑰花饼 现烤 礼盒 500克10个装 花味源 ','http://img01.taobaocdn.com/bao/uploaded/i1/T1a3TDXdprXXbz9bZ._111445.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('20','买就送茶叶品尝包 八克装 福建1725安溪铁观音清香型 乌龙茶 特级','http://img01.taobaocdn.com/bao/uploaded/i1/T1__L0XndiXXaeglI._113301.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('19','厦门特产 香贡贡糖果牛味肉丁 XO牛味肉粒4份包邮 舌尖上的中国 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1cx23XetaXXauXCg8_071539.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('18','淘金币 秒杀福建特产卤味风味小吃鸡爪洪濑红毛凤爪零食小吃团购 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1yKYTXdtoXXaCzp3._111208.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('17','黄金香原味迷你猪肉脯56g 厦门特产 蜜汁猪肉干 中华老字号 零食 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1N19zXnxWXXXHy7g9_104229.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('16','川香居 糖醋排骨 掌柜推荐 四川特产小吃零食 120g 满50包邮 ','http://img04.taobaocdn.com/bao/uploaded/i4/T16hPbXgJlXXbAIj.__080146.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('15','沈师傅鸡蛋干100g营养美味 四川特产 沈师傅鸡蛋干100克 ','http://img04.taobaocdn.com/bao/uploaded/i4/T1KX6tXnJsXXcQC8k._112940.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('14','四川私房菜，特产小吃。味味妈妈秘制香辣牛蹄筋，透亮Q滑 ','http://img01.taobaocdn.com/bao/uploaded/i1/T1tx5EXlRnXXXlgy.6_062259.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('13','椒丝牛肉（四川特产自贡麻辣兔头/兔腿；缠丝兔；冷吃兔冷吃牛肉) ','http://img02.taobaocdn.com/bao/uploaded/i2/T1..5GXoxxXXalsP.1_041722.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('12','湖南特产 盐津铺子 香酥牛肉味兰花豆 蚕豆500克 4斤包邮 ','http://img03.taobaocdn.com/bao/uploaded/i3/T1RO91XkhaXXch7OE6_062222.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('11','湖南常德特产 原价35现价32元两只免邮 散装泰味酱板鸭 刚出炉的 ','http://img02.taobaocdn.com/bao/uploaded/i2/T1k1OWXdhdXXcbY.cU_015918.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('10','湖南特产白鹤铁板鸡蛋煎饼早餐饼 500g称重 比Tipo面包干好吃N倍 ','http://img01.taobaocdn.com/bao/uploaded/i1/T12dzXXbVcXXbjanLb_095349.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('9','新疆风特产小吃特级果干冰梅冰凉梅子休闲食品孕妇零食满200包邮 ','http://img01.taobaocdn.com/bao/uploaded/i1/T1B0CzXllkXXa_ca7T_010708.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('8','湖南特产湘莲子\\12年寸三莲2件包邮\\农家自种纯天然\\特级白莲450g ','http://img01.taobaocdn.com/bao/uploaded/i1/T1.gT2XjFhXXcJGKE._111803.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('7','美国大杏核 纸皮 香脆可口 粒粒饱满 休闲零食首选','http://img01.taobaocdn.com/bao/uploaded/i1/T17x_ZXjFlXXaau978_071645.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('6','新疆特产 特级开口小银杏仁500g 杏核 野生饱满坚果干果 2斤包邮','http://img03.taobaocdn.com/bao/uploaded/i7/T1xoqfXaJsXXcUtHja_120240.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('5','新疆野生肉苁蓉 大芸250克 沙漠人参','http://img03.taobaocdn.com/bao/uploaded/i3/T15hYMXmtXXXcklKTb_123629.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('4','店庆一袋包邮晋谷香新疆和田壶瓶枣一级玉枣红枣批发山西大枣500g','http://img03.taobaocdn.com/bao/uploaded/i3/T1FUViXldEXXcf9moW_024549.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('3','新疆特产特级大个开心果250克 自然开口颗粒饱满 满2斤包邮','http://img04.taobaocdn.com/bao/uploaded/i4/T1BvJPXX4yXXad.nIW_024727.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('2','100%正宗 新疆库尔勒香梨 95元/箱15斤毛重 江浙沪包邮 新鲜 水果','http://img03.taobaocdn.com/bao/uploaded/i3/T1XLbSXkFfXXaWt5AT_011948.jpg_b.jpg','5/kg','9999');
insert into `foods`(`id`,`title`,`pic`,`price`,`num`)
values('1','新货 核桃 新疆大核桃 阿克苏薄皮核桃 仁很饱满【巴扎20度C】','http://img02.taobaocdn.com/bao/uploaded/i2/T1UQTWXjlhXXa0TSA._083409.jpg_b.jpg','5/kg','9999');



完整代码下载：https://github.com/jwhuang59/Demos/tree/master/falldata





php+mysql+jquery瀑布流
NiceGY
02-16 7550
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。php+mysql+jquery实现了瀑布流布局，实现了大小不一的图片按照一定的规律方式排列。 另外实现了图片延迟加载的功能，点击浏览器下拉滚动条时才加载更多的内容。
基于javaweb的鲜花商城系统(java+ssm+jsp+jquery+ajax+mysql)
m0_70011400的博客
10-23 395
基于javaweb的鲜花商城系统(java+ssm+jsp+jquery+ajax+mysql) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等
php mysql 模糊查询_jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
weixin_31921223的博客
02-19 159
对于这个功能企业上还算比较实用，推荐给大家；index.html*{margin:0;padding:0;}.text{width:200px;height:30px;line-height:30px;font-size:14px;outline:none;}ul{width:200px;height:auto;border:1px solid #999;border-top:none;}ul l...
php/mysql/jquery实现各系统流行的瀑布流显示方式
weixin_34397291的博客
07-30 73
php/mysql/jquery实现各系统流行的瀑布流显示方式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht...
瀑布流代码PHP,thinkPHP实现瀑布流的方法
weixin_30874365的博客
03-10 221
本文实例讲述了thinkPHP实现瀑布流的方法。分享给大家供大家参考。具体分析如下：很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例.流程:1. 页面初始化时,调用插件进行一次排版；2. 当用户将滚动条拖到底部时,用ajax加载...
java简历2年经验编写教程+面试题
最新发布
weixin_45934981的博客
04-17 1万+
这些项目我都没有写过，我只是答示例教你想，你要有这样的想法，这个项目世界到底有什么，比如图书馆里系统{分类、国籍、材质、价格、新旧、存储仓库、采购地址、退回地址、霉变处理、员工管理、书架材料、楼层管理.....}就是这么个意思，你一样要全部都会吗？项目名字换了，比如换成 城市环境监控平台的，你把你的图书管理模块换成你的农药管理模块这不就高大上了；该项目是一个监控人工造林，集成防火防灾等一体综合监管平台，有主要模板有人工植树、防火管理、防虫管理、土地管理、检验管理、施肥管理、人员管理、防盗管理、、、、、
JavaScript学习笔记
weixin_42530002的博客
11-04 5942
一、JavaScript 1、字符串 (1)、验证码 (2)、将字符串按照单词进行逆序，空格作为划分单词的唯一条件 (3)、对称数组 (4)、已知一个字符串对象中,英语单词用各种非字母字符分割，统计单词个数 (5)、判断单个字符是否是字母(包含大小写) (6)、实现函数，查找子串出现的次数，返回字符串str中出现substring的次数 (7)、判断是否为邮箱，已知千锋邮箱的用户名只能由数字字母下划线组成，域名为@1000phone.com, (8)、判断单个字符是否符合数字字母下划线 (9)、敏感词过滤
python开发系统-Python
weixin_37988176的博客
11-01 1221
您所在的位置：首页>厂商培训Python Web架构开发工程师Python架构开发课程介绍对python进行全面系统的学习，了解Python各个分支的发展及应用，面向脚本开发和脚本工具开发，提高软件开发的整合能力，同时为后续python web开发，给予python的数据库分析，大数据分析，自动化测试及运维夯实基础，学会模块的整合使用及快速开发流程，熟练使用python胶水语言的特性，在多语言环境...
PHP结合Jquery和ajax实现瀑布流特效
10-23
php+ajax+jquery实现无限瀑布流布局 宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片,非常的实用，需要的小伙伴可以参考下。
jq.ajax+php+mysql实现分页显示数据
12-21
用jQuery，结合PHP和Mysql，通过获取json数据实现网页分页数据
php jquery json mysql实现瀑布流图片加载
03-07
包含完整的图片文件和mysql数据文件，可以直接使用。代码均有注释，完整且简单的php、jquery实现瀑布流加载效果。
PHP jquery瀑布流特效源码.rar
08-29
PHP jquery实现瀑布流布局，其实一个核心的原理是，当滚动到最底部以上100像素时， 加载新内容。为了保证大家能够充分理解瀑布流的实现原理，就尽量保证了实例的简单性，这款瀑布流仅仅使用了php数组作为瀑布流所加载的内容，没有数据表文件，有php开发环境的话，瞬间就可以在本地搭起来看效果。经过优化后，完美兼容火狐、Chrome等浏览器。
php+mysql+json 瀑布流实例下载
01-03
php+mysql+json 瀑布流实例下载
PHP瀑布流下拉滚动时加载更多图文_瀑布流带数据库
03-27
PHP瀑布流简介： 1、为了简单操作，数据库使用了access 2、采用PHP+Ajax开发 3、带有社交网站分享功能 4、导航菜单固定
php+mysql+ajax实现瀑布流
qq_41687299的博客
06-15 309
一、html文件（顺序是1,2,3，但理解的话按3,2,1的顺序往前看） 2.php文件 3.css文件
php jquery瀑布流代码,网页瀑布流布局jQuery实现代码
weixin_34079693的博客
03-23 124
什么是瀑布流网页布局？瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。下面来看代码，用纯CSS3来做看效果怎样！HTML这里用一个大盒子来装全部内容，小盒子box装块内容，pic盒子装图片。看css的代码CSS*{margin: 0;padding: 0;}#all{/*关键代码*/-webk...
php 瀑布流布局,超简单的瀑布流布局实现方法
weixin_35741582的博客
03-10 322
本文主要介绍了jquery实现超简单的瀑布流布局的实例，代码简单，容易修改。下面跟着小编一起来看下吧，希望能帮助到大家。1.看看效果吧！2.html代码index.htmlTitleul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto}li{width: 33.33%;position:...
使用jq.ajax+PHP+MySQL实现关键词模糊查询教程
"b应用程序-jq.ajax+php+mysql实现关键字模糊查询(示例讲解)" 本文主要介绍了如何使用jQuery的ajax函数结合PHP和MySQL数据库来实现一个关键字模糊查询功能。在Web开发中，模糊查询允许用户输入部分关键词，系统就能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值