Jquery航点水平滚动问题答案

【问题标题】：Jquery waypoints horizontal scrolling issueJquery航点水平滚动问题
【发布时间】：2014-05-26 16:18:04
【问题描述】：

我正在尝试制作一个无限的水平滚动画廊，如下所示。问题是，任何一个方向的轻微滚动都会触发更多的图像加载。直到容器 div (infinite-container) 的右侧在浏览器窗口中可见之前，不应触发图像加载。代码如下。请问有什么建议吗？

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

【问题讨论】：

标签： php jquery css jquery-waypoints

【解决方案1】：

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

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

更新：在 Waypoints 3.0 中有一个“右视图”偏移别名。不过，Infinite 快捷方式不再是 jQuery 扩展。上面的代码现在看起来像这样：

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

【讨论】：