瀑布流介绍
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。逐渐在国内流行开来。国内大多数清新站基本为这类风格。
一般使用的网站类型有:
- 图片画廊：展示不同尺寸的图片，自动调整布局。
- 博客文章：以瀑布流形式展示博客文章摘要，提高阅读体验。
- 电商产品列表：展示不同类别和尺寸的产品，增强用户浏览体验。
- 社交媒体内容：展示用户生成的内容，如帖子、评论等，形成动态的瀑布流布局。
比如: 小红书首页作品的展示, 壁纸软件的壁纸展示等等..
介绍
react-masonry-css 是一个用于创建快速、响应式瀑布流布局的 React 组件，充分利用 CSS 和 React 的虚拟 DOM 渲染。
与现有的解决方案（如 DeSandro Masonry）相比，react-masonry-css 无需依赖 jQuery 或其他库，避免了多次渲染导致的性能问题。它使用简单的接口和少量的 CSS，通过指定断点来排列元素。
该组件支持 IE 10 及以上版本，无任何外部依赖，且与现有的 CSS 动画兼容。尽管不支持不同宽度元素的布局和基于高度的排序，但其性能和浏览器兼容性使其成为创建流畅、可靠布局的理想选择。
基本使用
安装
代码语言：javascript复制 npm install react-masonry-css
pnpm install react-masonry-css
yarn add react-masonry-css基本使用
导入
代码语言：javascript复制 import Masonry from "react-masonry-css";定义一个图片列表数组,其中里面每一项都是一个包含id和图片url 的对象
代码语言：javascript复制 const images = [
{
id: 1,
url: "https://images.unsplash.com/photo-1532009324734-20a7a5813719?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
},
{
id: 2,
url: "https://th.bing.com/th/id/OIP.Kumuo3P82ekHloWvUs8JGQHaEK?w=272&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7",
},
{
id: 4,
url: "https://th.bing.com/th/id/OIP.VT2BYdpsayqVZi3oxolhowHaEK?w=329&h=185&c=7&r=0&o=5&dpr=1.1&pid=1.7",
},
{
id: 5,
url: "https://th.bing.com/th/id/OIP.FLCWWMNXRHWZRHXnwf2F3gHaCF?w=311&h=98&c=7&r=0&o=5&dpr=1.1&pid=1.7",
},
{
id: 6,
url: "https://images.unsplash.com/photo-1532009324734-20a7a5813719?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=84",
},
{
id: 8,
url: "https://th.bing.com/th/id/OIP.VT2BYdpsayqVZi3oxolhowHaEK?w=329&h=185&c=7&r=0&o=5&dpr=1.1&pid=1.7",
},
{
id: 9,
url: "https://th.bing.com/th/id/OIP.FLCWWMNXRHWZRHXnwf2F3gHaCF?w=311&h=98&c=7&r=0&o=5&dpr=1.1&pid=1.7",
},
{
id: 10,
url: "https://images.unsplash.com/photo-1532009324734-20a7a5813719?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=84",
},
];定义断点配置项
代码语言：javascript复制
const breakpointColumnsObj = {
default: 4,
1100: 3,
700: 2,
500: 1,
};
说明
- default: 4:
- 默认情况下（即屏幕宽度大于所有定义的断点时），将内容分为 4 列。
- 1100: 3:
- 当屏幕宽度小于或等于 1100 像素时，将内容分为 3 列。
- 700: 2:
- 当屏幕宽度小于或等于 700 像素时，将内容分为 2 列。
- 500: 1:
- 当屏幕宽度小于或等于 500 像素时，将内容分为 1 列。
定义Masonry组件
代码语言：javascript复制 <Masonry
breakpointCols={breakpointColumnsObj}
className={WaterfallStyle.myMasonryGrid}
columnClassName={WaterfallStyle.myMasonryGridColumn}
>
{images.map((item, index) => {
console.log(item.id);
return (
<img
key={index}
src={item.url}
alt={item}
style={{ width: "100%", display: "block" }}
// 为什么这里需要修改this指向
onClick={() => goTodetail(item.id)}
/>
);
})}
</Masonry>最后需要添加上样式代码(官方文档也有说明)
创建一个index.module.css文件, 然后在该文件引入
代码语言：javascript复制 .myMasonryGrid {
margin-top: 2rem;
display: -webkit-box;
/* Not needed if autoprefixing */
display: -ms-flexbox;
/* Not needed if autoprefixing */
display: flex;
/* gutter size offset */
width: auto;
}
.myMasonryGridColumn {
padding-left: 1rem;
/* gutter size */
background-clip: padding-box;
}
/* Style your items */
.myMasonryGridColumn>img {
/* change div to reference your elements you put in <Masonry> */
margin-bottom: 1rem;
}效果
最后页面应该是:
看起来还很不错, 只需要配置一点点代码, 便可以实现, 非常适合小项目的快速开发.
在我这个项目中, 这个组件的image, 获取来源于父组件的传递
// 定义存储壁纸的state
const [images, setImages] = useState([]);
// 渲染完毕之后 请求接口拿数据
const getHot20Data = async () => {
const res = await getHot20();
setImages(res);
};
useEffect(() => {
getHot20Data();
}, []);
<Waterfall images={images}></Waterfall>
