【发布时间】：2014-09-30 12:58:16
【问题描述】：
我正在使用以下代码来使用 Masonry.js 和无限滚动。
<div id="container_div">
content to be loaded
</div>
<div id="page-nav">
<?php
$load = 0;
$load++;
print"<a href='gems_ajax_load.php?userid={$userid}&load={$load}''>next</a>"; ?>
</div>
<script type="text/javascript">
var $container = $('#masonry_container');
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
debug :true,
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems, true );
}
);
</script>
我遇到的问题是，无论我在页面上的哪个位置，每次滚动时都会加载无限滚动。一旦我触摸滚动条，它就会加载更多内容，这是不切实际的。有什么想法吗？
当它确实加载更多内容时，gif 和加载文本会出现在#masonry_container 的左上角，而它们确实应该显示在页面底部？
编辑： 按照这里的要求是我对该页面的完整代码。它仍在开发中，所以请忽略任何多余的东西！
<?php
include_once"global.php";
include_once"header.php";
?>
<head>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<!---<script src="js/imagesloaded.pkgd.min.js"></script>-->
<script>
function likeGem(id,userid,classname)
{
$.ajax({
type: "GET",
url: 'ajaxrequests.php?action=gemlike',
data: "id=" + id + "&userid=" + userid,
success: function(data) {
// data is ur summary
$(classname).html(data);
console.log(classname);
}
});
}
</script>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.postcard_create_div input[type="text"]{
width: 100%;
height: 30px;
border: #CACACA 3px solid;
margin: 3px;
padding: 2px;
}
.postcard_create_div p {
margin:5px;
}
.postcard_create_div textarea{
width:100%;
margin:3px;
}
.postcard_create_desc{
margin: 15px;
padding: 10px;
background: #F37A7A;
line-height: 20px;
font-size:13px;
color:#FFFFFF;
}
.postcard_create_div .small_text{
font-size: 10px;
padding-left: 15px;
}
.item { width: 315px; float: left;min-height:300px;border:1px solid black;margin- bottom:20px;border-radius: 4px;background:#FFFFFF;}
#masonry_container{padding:20px;height:auto;}
.interact_gem i{
margin:0 4px;
transition:color 0.5s;
}
.fa-heart-o:hover{
color:red;
}
.fa-comment-o:hover{
color:blue;
}
.fa-check-square-o:hover{
color:green;
}
#infscr-loading{
position:absolute;
bottom:0;
}
</style>
</head>
<div id="header_sub_menu">
<span class="open-popup-link"><a href="#start-new-convo" data-effect="mfp-zoom-out" >Create a Gem</a></span>
</div>
<div style="margin: 30px auto 10px auto;width: 60%;text-align:center;"><p> <img class="pullup" src="css/images/diamond.png"></p>
</div>
<?php
?>
<div id="start-new-convo" class="white-popup mfp-with-anim mfp-hide">
<p style="font-weight:600;text-align:left;">Create a Gem</p>
<div class="postcard_create_desc">
Every Journey has a story. Everyone's story is different and there's always Hidden Gems to be found.
</div>
<div class="postcard_create_div" style="width:90%;margin:auto;text-align:left;">
<form>
<p><input placeholder="Where is it?"type="text" name="dest_name"></p>
<p> <input placeholder="When did you go?" type="text" name="visit_date"></p>
<p> <textarea placeholder="What's so special?" name="details"></textarea></p>
<p style="font-size:12px;"><input type="radio" name="private">Private Gem?<br /><span class="small_text" >A private Gem will only be visible to you and your followers</span></p>
<p style="text-align:right;"><input type="submit" value="Create Gem"></p>
</form>
</div>
</div>
<div id="masonry_container" class="js-masonry ">
<?php
$get_gems = mysqli_query($con,"SELECT * FROM gems ORDER BY created_date DESC LIMIT 0,2");
$gem_count_up = mysqli_query($con,"SELECT * FROM gems");
$nbr = mysqli_num_rows($gem_count_up);
while($gems = mysqli_fetch_array($get_gems)){
$get_gem_activity = mysqli_query($con,"SELECT * FROM gem_activity WHERE gem_id = '{$gems['id']}'");
$check_likes = mysqli_query($con,"SELECT * FROM gem_likes WHERE userid = $userid AND gem_id = '{$gems['id']}'");
if(mysqli_num_rows($check_likes) > 0){$gem_liked_status = "<i style='color:red;' class='fa fa-heart regtooltip' title='Gem Liked'></i>";}else{$gem_liked_status = "<i class='fa fa-heart-o regtooltip' title='Like this Gem'></i>";}
print"
<div class='item'>
<p style='padding: 7px 0 4px 4px;border-bottom: 2px solid rgb(185, 174, 174);font-weight: 600;'>{$gems['gem_name']}</p>
<p style='text-align:center;'><img style='height:165px;max-width:248px;' src='css/images/{$gems['gem_picture']}'></p>
<p class='interact_gem' style='padding:3px;'> ";?>
<a href="javascript:void(0);" onclick="likeGem(<?php print"{$gems['id']},{$ir['userid']},gem_like_holder_{$gems['id']}";?>)"><span id="gem_like_holder_<?php print"{$gems['id']}";?>" ><?php print"{$gem_liked_status}";?></span></a>
<?php print"
<i class='fa fa-comment-o regtooltip' title='Comment on Gem'></i>
<i class='fa fa-check-square-o regtooltip' title='Mark as Found'></i></p>
<p style='font-size: 10px;font-weight: 800;text-align: right;padding-top: 2px;padding-right: 2px;'>{$gems['gem_date']}</p>
<p style='margin-top:12px;padding: 7;font-size: 13px;'>".truncate($gems['gem_body'],100)."</p>
<p class='regtooltip' title='{$gems['created_date']}' style='margin-top:15px;padding: 5px;border-bottom: 1px solid;font-size: 12px;color:#ADACAC;'><img style='height: 30px;vertical-align: middle;margin-right: 5;' src='".get_display_picture($gems['gem_userid'])."'><span style='font-weight:600;'>".get_username($gems['gem_userid'])."</span> created a new Gem</p>
";
while($gem_activity = mysqli_fetch_array($get_gem_activity))
{
$gem_activity_text = "";
if($gem_activity['activity_type'] == "like"){$gem_activity_text = "liked this Gem.";}elseif($gem_activity['activity_type'] == "comment"){$gem_activity_text = "commented.";}
print"<p class='regtooltip' title='".time_ago($gem_activity['activity_date'])."' style='padding: 5px;border-bottom: 1px solid;font-size: 12px;color:#ADACAC;'><img style='height: 30px;vertical-align: middle;margin-right: 5;' src='".get_display_picture($gem_activity['userid'])."'><span style='font-weight:600;'>".get_username($gem_activity['userid'])."</span> {$gem_activity_text} </p>";
}
print"
</div>";
}
?>
</div>
<nav id="page-nav" style="">
<?php
$load = 0;
$load++;
print"<a href='gems_ajax_load.php?userid={$userid}&load={$load}'></a>"; ?>
</nav>
<script>
$(function(){
var $container = $('#masonry_container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
columnWidth: 315,
gutter : 20
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
debug : true,
pixelsFromNavToBottom:100,
bufferPx: 40, //this
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems);
});
}
);
});
</script>
<script type="text/javascript">
//initiating jQuery
jQuery(function($) {
$(document).ready( function() {
//enabling stickUp on the '.navbar-wrapper' class
$('#scroll_menu').stickUp();
});
});
</script>
编辑： 我设法在我网站的可访问页面上复制了这个问题。 http://www.dribbul.com/external_test
【问题讨论】：
标签： javascript jquery jquery-masonry infinite-scroll