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

最新推荐文章于 2022-02-27 21:38:06 发布
最新推荐文章于 2022-02-27 21:38:06 发布
阅读量1.7k 收藏 4
点赞数 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





戏里戏外。
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php+mysql+json 瀑布流实例下载
01-03
php+mysql+json 瀑布流实例下载
php实现瀑布流形式
11-04
php实现的瀑布流，研究了一下流行的瀑布流，大多的列子都是用js直接做的瀑布流，数据是死的，所以自己改了一下一个瀑布流的例子，能连接数据库读取新数据，可以滚动无限加载 ！
jq.ajax+php+mysql实现分页显示数据
12-21
用jQuery，结合PHP和Mysql，通过获取json数据实现网页分页数据
模仿京东商城首页多级导航菜单
吃瓜群众的博客
09-17 2486
京东商城导航菜单 *{ padding: 0; margin:0; font-family: "microsoft yahei"; font-size: 14px; } .nav{ border: 2px solid rgb(177,25,26); display: block; width: 210px; text-indent: 2em; m
CSS-网页布局
ZzStant的博客
10-21 212
文章目录1.头部区域2.菜单导航区域3.内容区域4.底部区域 1.头部区域 头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 网页布局</title> <meta nam...
php+mysql+scroll滚动事件实现瀑布流
qq_41687299的博客
06-15 250
一。html文件
php+mysql+jquery瀑布流
NiceGY
02-16 7501
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。php+mysql+jquery实现了瀑布流布局，实现了大小不一的图片按照一定的规律方式排列。 另外实现了图片延迟加载的功能，点击浏览器下拉滚动条时才加载更多的内容。
mysql实现瀑布流_想做一个瀑布流获取图文的方式，想高手给个代码能够获取数据库的文件...
weixin_39761822的博客
02-18 166
varopt={getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口...var opt={getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集...
AJAX+PHP+MySQL实现瀑布流下拉刷新
pengxiang1998的博客
09-22 214
今天，博主完成了一个AJAX+PHP+MySQL实现瀑布流下拉刷新的小Demo,下面便来介绍一下项目的实现。 ajax瀑布流 首先，我们要从数据库中获取我们的数据信息，在这里便是图片信息。 使用php进行获取： <?php require 'fun.php'; //调用数据库链接文件 include "msg.php"; $sql="select * from img";
php+mysql+jquery.more.js下拉加载带sql数据完整流程带mysql测试数据
10-09
jquery.more.js,js下拉加载、jq下拉加载php+mysql+jquery.more.js完整一套流程。非常好用
PHP瀑布流下拉滚动时加载更多图文_瀑布流带数据库
03-27
PHP瀑布流简介： 1、为了简单操作，数据库使用了access 2、采用PHP+Ajax开发 3、带有社交网站分享功能 4、导航菜单固定
PHP结合Jquery和ajax实现瀑布流特效
10-23
php+ajax+jquery实现无限瀑布流布局 宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片,非常的实用，需要的小伙伴可以参考下。
php ajax mysql 点击加载更多 分页
03-29
php ajax mysql 点击加载更多 分页 ，数据库在根目录下article.sql 配置文件content.php
PHP+Ajax点击加载更多内容
08-09
PHP+Ajax点击加载更多内容，适用于手机端和web端。
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
11-28
对于这个功能企业上还算比较实用，推荐给大家； index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> *{margin:0;...height:30px
jq.ajax+php+mysql数据库实现用户无刷新评论
12-17
无需经过漫长的等待，利用jq.ajax+php+mysql数据库实现用户无刷新评论
CSS导航栏浅谈
Fengzechen_的博客
02-27 3007
我们都知道，导航栏主要分为垂直导航栏和水平导航栏
php layui流加载,thinkPHP+LayUI 流加载功能如何实现
weixin_35198152的博客
03-20 192
thinkPHP+LayUI 流加载功能如何实现？这篇文章主要介绍了thinkPHP+LayUI流加载实现功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，感兴趣的玩家快来一聚教程网参考一下吧！htmljs，要引入layui.jslayui.use('flow', function() {var $ = layui.jquery;var flow = layui.flow;flo...
jq 实现 瀑布流
最新发布
06-02
要使用jq实现瀑布流，可以按照以下步骤进行操作： 1. 首先，定义一些CSS样式，包括每个瀑布流块的宽度、高度、边距等。 2. 使用jQuery选择器选中瀑布流容器，并使用方法如下： ```javascript var $container = $('#container'); ``` 3. 使用jQuery的ajax方法来获取数据，并在成功回调函数中将数据添加到瀑布流容器中。可以使用方法如下： ```javascript $.ajax({ url: 'data.json', dataType: 'json', success: function(data) { $.each(data, function(index, value) { var $box = $('<div>').addClass('box').appendTo($container); var $img = $('<img>').attr('src', value.url).appendTo($box); }); } }); ``` 4. 当所有图片加载完成后，使用jQuery的masonry插件来实现瀑布流布局，可以使用方法如下： ```javascript $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', isAnimated: true }); }); ``` 通过以上步骤，就可以使用jq实现瀑布流了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值