主题Demo:https://10.1pxeye.com/docs/waterfall-infinite-scroll/

主题下载:点击下载

说明:

  1. 该主题的瀑布流布局是基于Masonry插件实现的。所以跟布局相关问题可以查看相关文档。
  2. 请求方式为异步请求。通过await fetch实现。
  3. 由于masonry调整布局时不会判断内容当中的图片是否加载完成,所以插件中的图片是通过背景图片的方式显示的。基于被加载图片的尺寸自动在服务器端设置好了其父级的容器宽高比。保证图片的图片的加载状态不会影响到布局。
  4. 通过滚动判断data-next-page容器的位置以加载即将要进入屏幕范围的内容。
  5. 剩下的自己看着办吧。
截图: