我正在为我的博客使用 masonry 样式。我想在我的博客中添加无限滚动。
我正在使用自定义php代码(不使用任何框架)。
我尝试使用此网站上的无限滚动jquery:http://infiniteajaxscroll.com/。
它对我不起作用。
这是我的代码:
<div id="envor-posts-masonry">
<?php
require 'blog_function.php';
$query = "Select * FROM article ORDER BY post_date DESC ";
$posts = get_posts($query);
foreach($posts as $post)
{
?>
<article class="post post-masonry">
<div class="inner">
<header>
<h3><i class="fa fa-pencil"></i> <a href="blog_single_view.php?post_id=<?php echo $post['post_id']; ?>"><?php echo $post['post_title']; ?></a></h3>
<p>posted on <a href="">
<?php
$timestamp = $post['post_date'];
echo $data = date('d-m-Y',strtotime($timestamp)); ?></a> <br> by <a href=""><?php echo $post['author']; ?></a></p>
</header>
<p><?php $content=$post['post_content'];
$string = strip_tags($content);
if (strlen($string) > 500) {
$stringCut = substr($string, 0, 500);
$string = substr($stringCut, 0, strrpos($stringCut, ' ')).'....';
}
echo $string;
?></p>
<p><a href="blog_single_view.php?post_id=<?php echo $post['post_id']; ?>" class="envor-btn envor-btn-small envor-btn-secondary-border">read the rest <i class="fa fa-arrow-circle-right"></i></a></p>
</div>
</article>
<?php
}
?>
<script src="../js/jquery-ias.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
var $container = $('#posts-masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.post-masonry',
isFitWidth: false,
isAnimated: true
})
});
$.ias({
container: '#posts-masonry',
item: '.post-masonry',
pagination: '#pagination',
next: '.next',
onLoadItems: function(items) {
var $newElems = jQuery(items).css({ opacity: 0 });
$newElems.imagesLoaded(function() {
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
});
return true;
},
});
$(window).resize(function() {
$container.masonry('bindResize');
});
});
</script>
任何人都可以帮我吗??
提前致谢。