我正在尝试制作一个无限水平滚动画廊，如下所示。问题是，任一方向的任何轻微滚动都会触发更多图像加载。在容器 div(无限容器)的右侧在浏览器窗口中可见之前，不应触发图像加载。下面的代码。有什么建议吗？
PHP
echo('<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="waypoints.js"></script>
<script src="waypoints-infinite.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(\'.infinite-container\').waypoint(\'infinite\', {horizontal:true});
});
</script>
');
echo('<link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css">');
echo('<link rel="stylesheet" type="text/css" href="mainstyletesthoriz.css" />');
//Get number of animations
$queryNum = "SELECT * FROM Animations WHERE approved='1'";
$resultNum = @mysql_query($queryNum);
$num_results = mysql_num_rows($resultNum);
//echo $num_results;
//Get animations required
$query = "SELECT * FROM Animations WHERE approved='1' ORDER BY animationid DESC LIMIT $minAnimation, $maxAnimation";
$result = @mysql_query($query);
$totalPages = ceil($num_results / $numImagesPerPage);
//echo $totalPages;
echo('<script type="text/javascript" src="script.js"></script></head><body><div class="infinite-container">');
if ($num_results > 0)
{
$array = array();
while ($row = mysql_fetch_assoc($result))
{
$array[] = $row;
}
for ($i = 0; $i < $numImagesPerPage; $i++)
{
$filePath = "animations/".$array[$i]['animationid'].".gif";
echo('<img class="infinite-item" src="'.$filePath.'"/>');
}
}
echo('</div>');
if($pageNum < $totalPages - 1)
{
echo('<span><a class="infinite-more-link" href="indextesthoriz.php?p='.$nextPageNum.'"></a></span></body></html>');
}
CSS
body
{
background-color:#dbdbdb;
overflow:auto;
}
div.infinite-container
{
background-color:#db0080;
height:180px;
display:inline-block;
white-space: nowrap;
}
img.infinite-item
{
width:320px;
height:180px;
margin-right:8px;
margin-bottom:8px;
display:inline-block;
}
.infinite-more-link
{
visibility:hidden;
}
最佳答案
您已经正确地将航路点的 horizontal 选项设置为 true，但是在这种情况下您还需要设置另一个选项，offset。这是因为 Waypoints Infinite Shortcut 的默认偏移量是 bottom-in-view，这是一个特定于垂直航路点的偏移量。没有“右 View ”，但您需要将其设置为等效的功能，如下所示:
$('.infinite-container').waypoint('infinite', {
horizontal:true,
offset: function() {
return $(window).width() - $(this).outerWidth();
}
});
更新:在 Waypoints 3.0 中有一个“右 View ”偏移别名。不过，Infinite 快捷方式不再是 jQuery 扩展。上面的代码现在看起来像这样:
var waypoint = new Waypoint.Infinite({
element: $('.infinite-container')[0],
horizontal:true,
offset: 'right-in-view'
});
关于php - Jquery 航路点水平滚动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23874192/