jquery - 水平无限滚动

Question

我有一个水平图像列表，我希望在 div 中应用无限滚动。理想情况下，这只是窗口本身，但现在它是一个 div。

我认为这涉及对 Paul Irish 的无限滚动（？）的一点破解我知道我现在可以在 1.2 中将 localMode 设置为 true 以便它在 div 内工作，但我也知道（认为）我需要欺骗浏览器从“下一页”中思考内容。我不知道该怎么做。我已经搜索和搜索，现在我希望你们天才提供您的精彩想法。谢谢！

Answer 1

如果您希望元素水平排列，您将需要一个提供width属性的容器。要使这种动态化，只需添加如下内容：

$(document).ready(function(){
  var totalWidth = 0;
  $('#container').children().each(function(){
    totalWidth += $(this).outerWidth();
  });
  $('#container').css('width', totalWidth);
});

如果您直接在您的下方使用该容器body并给您body一个overflow:scroll. 然后给两个容器，body以及html100% 的高度，这应该水平排列。

Answer 2

Lazyload 正是我想要的。http://www.appelsiini.net/projects/lazyload。我在一个名为#image_list 的容器中有一个图像列表。

$(document).ready(function () {
    $("#image_list img").lazyload({
          effect : "fadeIn"

      });
});

这很不言自明。然后我没有做最好的解释工作的水平无限列表包含在这个 div 中：

#image_list {
 margin: 0 auto;
 white-space: nowrap;
 width: auto;
 overflow: auto;
 clear: both;
 position: relative;
}

它实际上不是一个列表，因为 Firefox 拒绝不包装它！所以这是一个有无穷 td 的表行：

<table>
 <tbody>
  <tr>
   <td><img src="img1.jpg" /></td>
   <td><img src="img2.jpg" /></td>
        ...
   <td><img src="img34.jpg" /></td>
  </tr>
 </tbody>
</table>