前端瀑布流详解以及前后台交互瀑布流

一、前端简单瀑布流以及无限加载瀑布流

二、前后端交互瀑布流

前端代码：

	
	
	


	

	     //这里是引入了自己封装的ajax 参考‘jquery中的ajax、原生ajax和自封装ajax’
	

后台php代码：

 'ok','info' => $imgArr);
echo json_encode($success);

?>

三、连接数据库（运用原生方式） 把数据放到数据库中，前端代码不变 更换php代码

 'ok');
//连接数据库
$con = mysqli_connect('localhost','root','','imgdb');
//判断是否成功连接数据库(也就是加个保险)
if($con){
	//避免乱码
	mysqli_query($con,'set names utf8');
	mysqli_query($con,'set character_set_client=utf8');
	mysqli_query($con,'set character_set_results=utf8');
	//执行查询语句  结果存放在一个变量里
	$result = $con->query('select * from imglist where 1');
	//定义空数组存放从数据库遍历出来的数据
	$info = [];
	//遍历查询出来的结果
	for($i=0; $row=$result->fetch_assoc(); $i++){
		$info[$i] = $row;
	}
	// 遍历$info数组 存放在$imgArr数组中,返回给前端
	for($j=0; $j

四、连接数据库（运用pdo方式）

setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
			}catch(PDOException $e){
				echo $e->getMessage();
			}
		}
		return self::$pdo;
	}
}
$success = array('msg'=>'ok');
$pdo = singleTonPdo::getpdo();
$pdo->query('set names utf8');
$pdo->exec('set names utf8');
try{
	$pdo->beginTransaction();
	$pdoso = $pdo->prepare('select * from imglist where 1');
	$pdoso->execute();
	$pdoso->bindColumn(1,$src);
	$info = [];
	for($i=0; $pdoso->fetch(PDO::FETCH_ASSOC); $i++){
		$info[$i] = ['lujing'=>$src];
	}
    for($j=0; $jcommit();
}catch(PDOException $e){
	$pdo->rollBack();
	echo '失败' ;
}

echo json_encode($success);
?>