如何解决用Masonry + Infinite Scroll连接MySQL数据库
我更像是Web开发的初学者,对MySQL和PHP经验不足。
我在Masonry上做了一些博客网站,现在想升级它以实现MySQL数据库,这样我就不必再将每个博客文章都硬编码到登录页面中了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP TEST</title>
<link href="css/gridstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- CONTENT -->
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<?php
$conn = mysqli_connect("x","y","z","database");
$sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5";
$result = mysqli_query($conn,$sql);
while ($dsatz = mysqli_fetch_assoc($result)) {
$rows = array();
echo "<div class='grid-item'>";
echo $dsatz['name'];
echo "</div>";
}
?>
</div>
<!-- BUTTON-->
<p>
<button class="view-more-button">View more</button>
</p>
<!-- END TEXTS -->
<div class="page-load-status">
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.js" type="text/javascript"></script>
<script src="js/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem,{
itemSelector: '.grid-item',gutter: '.gutter-sizer',});
$('.grid').infiniteScroll({
outlayer: msnry,path: 'content/Page_{{#}}.php',append: '.grid-item',scrollThreshold: false,button: '.view-more-button',status: '.page-load-status',history: false,});
</script>
</body>
</html>
我现在的问题是连接第二页。无限滚动期望追加“ .grid-item”,因此,如果我将php代码放在第二页上,则不会发生任何事情。
最后,我希望每个页面显示5个网格项。我会改变
$sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5";
到
$sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5,5";
显示接下来的5行。
感谢您的时间!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。