Question

我正在尝试创建一个无限的水平滚动图库，如下所示。问题是，任何方向上的任何轻微滚动都会触发更多图像加载。在浏览器窗口中可见容器div（无限容器）的右侧之前，不应触发图像加载。代码如下。有什么建议吗？

enter image description here

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;
}

Answer 1

您已将航点的horizontal选项正确设置为true，但在这种情况下，您需要设置另一个选项offset。这是因为Waypoints Infinite Shortcut的默认偏移量为bottom-in-view，这是一个特定于垂直航路点的偏移量。没有＆＃34;右视图＆＃34;但是你需要将它设置为相应的功能，如下所示：

$('.infinite-container').waypoint('infinite', {
  horizontal:true,
  offset: function() {
    return $(window).width() - $(this).outerWidth();
  }
});

更新：在Waypoint 3.0中，有一个＆＃39;右视图＆＃39;偏移别名。无限快捷方式不再是jQuery扩展。上面的代码现在看起来像这样：

var waypoint = new Waypoint.Infinite({
  element: $('.infinite-container')[0],
  horizontal:true,
  offset: 'right-in-view'
});

Jquery waypoints水平滚动问题

1 个答案: