PHP/JS/Jquery 内容往下拉展示图片
思否 问答 已采纳 👍 2 含 AI 优化版
问题
PHP/JS/Jquery 内容往下拉展示图片
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
提问者希望实现“下拉展示图片”的效果，但描述较模糊，可能涉及瀑布流布局、下拉加载更多内容、图片懒加载等几种常见需求之一。
涉及技术
JavaScript、jQuery、PHP、Ajax
期望结果
明确具体想要的效果（瀑布流布局 / 无限下拉加载 / 图片懒加载），并获得对应的实现思路。
回答
原始回答
2016-12-15 你这个不知道是什么效果。你确定了你的问题，再留言吧1.瀑布流，是一种图片布局。（一般就是计算每一个高度，然后统计，aboslute设置位置。）2.无限下拉，是一种加载内容的方式。（一般就是判断一个固定位置，scrolltop到这个位置就触发ajax加载数据）3.懒加载，解决一个页面内加载图片数据量大的问题。（一般就是data-url里面放真的url src里面放占位图url。然后根据你看到的位置，动态加载图片）
AI 优化 · 回答整理
解答思路
原始问题描述不够具体，回答者先指出需要明确到底是哪种效果，然后分别给出三种常见方案的核心思路。
详细说明
- 瀑布流：一种图片布局方式，一般做法是先计算每张图片的高度，统计出每一列当前的总高度，再用
position: absolute把新图片放到最矮的那一列下面。 - 无限下拉：一种“滚动到底部自动加载”的交互方式，通常判断页面滚动位置（
scrollTop）是否到达某个固定阈值，一旦到达就触发 Ajax 请求加载下一页数据。 - 懒加载：用于解决单页图片过多、一次性加载导致卡顿的问题。做法是把真实图片地址放在自定义属性（如
data-url）里，src先放一张占位图，等图片进入可视区域后再动态把data-url的值赋给src，触发真正的加载。
小结
“下拉展示图片”背后其实是三种不同的技术方案：瀑布流解决布局排版，无限下拉解决分页加载时机，懒加载解决性能问题；实际开发中三者常常组合使用。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault