horizontal infinite scroll

问题

I have a horizontal list of images to which I would love to apply an infinite-scroll within a div. Ideally this would just be the window itself, but for right now it's a div.

I think this involves a bit of a hack to Paul Irish's infinite scroll(?) I know I can now set localMode to true in 1.2 for it to work inside of a div, but I also know (think) that I need to trick the browser into thinking content from what would be "next pages." I can't quite figure out how to do that. I've searched and searched and now I would love for you geniuses to offer your brilliant thoughts. Thanks!

回答1:

If you want elements to line up horizontally, you will need a container that gives a width property. To make that dynamic just add something like this:

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

If you use that container directly under your body and give your body a overflow:scroll . Then give both the container, the body and the html a height of 100% this should be lined up horizontally.

回答2:

Lazyload is exactly what I was looking for. http://www.appelsiini.net/projects/lazyload. I have a list of images within a container called #image_list.

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

      });
});

That much is pretty self-explanatory. And then the horizontal infinite list that I wasn't doing the best job of explaining is contained within this div:

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

It's ACTUALLY not a list though because firefox refused to not wrap it! So it's a table row with endless td's:

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

来源：https://stackoverflow.com/questions/12800771/horizontal-infinite-scroll

标签

jquery

horizontal-scrolling

infinite-scroll