完整效果图:
思路
1.先写insert.php插入数据(这里插入的93条)
<?php
// 解决乱码
header('content-type:text/html;charset=utf8');
try{
// 1.设置数据库连接
$dsn="mysql:host=localhost;dbname=tx";
// 2.创建PDO 生成数据库连接
$pdo=new PDO($dsn,'root','');
// 3.设置字符集
$pdo->exec("set names utf8");
// 4.准备插入语句
$inse=$pdo->prepare("INSERT INTO pubu(path) VALUE(?)");
// 5.执行sql语句
//插入93条
for($i=1;$i<=93;$i++){
$inse->execute(array($i.'.jpg'));
}
}catch(Exception $e){
echo $e.getMessage();
}
?>
2.再写select.php查询数据(这里先查询20条)
<?php
// 解决乱码
header('content-type:text/html;charset=utf8');
try{
// 1.设置数据库连接
$dsn="mysql:host=localhost;dbname=tx";
// 2.创建PDO 生成数据库连接
$pdo=new PDO($dsn,'root','');
// 3.设置字符集
$pdo->exec("set names utf8");
// 4.查询语句 先查20条
$sele=$pdo->prepare("SELECT path FROM pubu limit 0,20");
// 5.执行sql语句
$sele->execute();
// 6.查询的语句解析结果集
$data=$sele->fetchAll();
// 7.输出
echo json_encode($data);
}catch(Exception $e){
echo $e.getMessage();
}
?>
3.瀑布布局
每个li设置等宽,然后一个li为一整列,li不设置高度,img设置width:100%
.box{
width: 100%;
}
.wrap{
width: 1000px;
margin: 0 auto;
}
ul{
list-style: none;
margin:0 auto;
display: flex;
}
li{
//设置等宽
width: 300px;
}
li>img{
width: 100%;
}
<div class="box">
<div class="wrap">
<ul>
<li>
<img src="images/1.jpg">
<div>1</div>
<img src="images/5.jpg">
<div>5</div>
<img src="images/9.jpg">
<div>9</div>
<img src="images/13.jpg">
<div>13</div>
<img