我是初学者,我试图从数据库中动态加载成功的东西。然后,我的下一个目标是使用javascript实现无限滚动,但是我认为HTML代码被注入到错误的地方或其他地方,因为当我使用data-columns
并尝试通过滚动加载更多内容时,样式变得很疯狂。如果将其取出,则可以很好地加载,但是页面的样式无处不在。
当我开始加载4个项目,然后到达底部页面时再加载4个项目时的外观
在其中注入数据的Index.php html
<div id="fh5co-main">
<div class="container">
<div class="row">
<div id="fh5co-board" class="results" data-columns>
</div>
</div>
</div>
</div>
用于index.php中无限负载的Javascript
<script type="text/javascript">
var start = 0;
var limit = 4;
var reachedMax = false;
$(window).scroll(function () {
if($(window).scrollTop() == $(document).height() - $(window).height())
getData();
});
$(document).ready(function () {
getData();
});
function getData() {
if(reachedMax)
return;
$.ajax({
url: 'load_more.php',
method: 'POST',
dataType: 'text',
data: {
getData: 1,
start: start,
limit: limit
},
success: function (response) {
if (response == "reachedMax")
reachedMax = true;
else {
start += limit;
$(".results").append(response);
}
}
});
}
</script>
load_more.php
<?php include_once "includes/functions.php"?>
<?php
if(isset($_POST['getData'])) {
$start = $_POST['start'];
$limit = $_POST['limit'];
$query = "SELECT title, image, text FROM posts LIMIT $start, $limit";
$result = mysqli_query(DatabaseConnect(), $query);
if (mysqli_num_rows($result) > 0) {
$response = "";
while ($data = mysqli_fetch_array($result)) {
$response .= '
<div class="item">
<div class="animate-box">
<a href="images/' . $data['image'] . '" class="image-popup fh5co-board-img" title="' . $data['title'] . '"><img src="images/' . $data['image'] . '" alt="image"></a>
</div>
<h3>' . $data['title'] . '</h3>
<div class="fh5co-desc">' . $data['text'] . '</div>
</div>';
}
exit($response);
} else
exit('reachedMax');
}