无限滚动随机图片相册答案

【问题标题】：Infinite scroll random image album无限滚动随机图片相册
【发布时间】：2014-11-19 13:26:57
【问题描述】：

我需要一个简单的页面来加载来自特定文件夹的所有图像，并以随机顺序显示它们，将它们一个接一个地放置，制作一个“无限”垂直滚动页面:)

【问题讨论】：

【解决方案1】：

有一个名为 infinite-scroll 的 jQuery 插件可以完成所描述的大部分内容。它的方法允许您决定何时将更多内容加载到您的页面、您想要加载的内容以及加载位置。我相信它的核心功能是$('.selector').infinitescroll('scroll');。

编辑
如果这个解决方案太复杂，stackoverflow上有一个简单的滚动检测示例here和here。

【讨论】：

谢谢！要去试试！你认为它也可以自动调整图像大小吗？
您必须指定要加载的内容。我建议阅读我在答案中提供的链接上的文档。然后您可以决定是否可以使用它。
为什么我什么也看不见？ rfactorstreetcarstracks.altervista.org/scroller.htm
我不想诋毁你的能力，但是，我至少要花一个小时来学习如何在我自己的代码中使用“无限滚动”。你能告诉我你在自己的代码中实现插件所采取的步骤，以便我更好地了解你做了什么吗？
别担心，等我回复:)

【解决方案2】：

首先，我将所有 zip 内容上传到我的 ftp。

在此之后我添加了：

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://rfactorstreetcarstracks.altervista.org/jquery.infinitescroll.js"></script>


    <script type="text/javascript">
$('.selector').infinitescroll({
  loading: {
    finished: undefined,
    finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
                img: null,
    msg: null,
    msgText: "<em>Loading the next set of posts...</em>",
    selector: null,
    speed: 'fast',
    start: undefined
  },
  state: {
    isDuringAjax: false,
    isInvalidPage: false,
    isDestroyed: false,
    isDone: false, // For when it goes all the way through the archive.
    isPaused: false,
    currPage: 1
  },
  behavior: undefined,
  binder: $(window), // used to cache the selector for the element that will be scrolling
  nextSelector: "div.navigation a:first",
  navSelector: "div.navigation",
  contentSelector: null, // rename to pageFragment
  extraScrollPx: 150,
  itemSelector: "div.post",
  animate: false,
  pathParse: undefined,
  dataType: 'html',
  appendCallback: true,
  bufferPx: 40,
  errorCallback: function () { },
  infid: 0, //Instance ID
  pixelsFromNavToBottom: undefined,
  path: "/", // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
  maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});
</script>

【讨论】：