react-masonry-css瀑布流的基本使用

心安事随

发布于 2024-07-29 17:31:23

620

发布于 2024-07-29 17:31:23

文章被收录于专栏：前端大合集

瀑布流介绍

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。逐渐在国内流行开来。国内大多数清新站基本为这类风格。

一般使用的网站类型有:

图片画廊：展示不同尺寸的图片，自动调整布局。
博客文章：以瀑布流形式展示博客文章摘要，提高阅读体验。
电商产品列表：展示不同类别和尺寸的产品，增强用户浏览体验。
社交媒体内容：展示用户生成的内容，如帖子、评论等，形成动态的瀑布流布局。

比如: 小红书首页作品的展示, 壁纸软件的壁纸展示等等..

介绍

react-masonry-css 是一个用于创建快速、响应式瀑布流布局的 React 组件，充分利用 CSS 和 React 的虚拟 DOM 渲染。

与现有的解决方案（如 DeSandro Masonry）相比，react-masonry-css 无需依赖 jQuery 或其他库，避免了多次渲染导致的性能问题。它使用简单的接口和少量的 CSS，通过指定断点来排列元素。

该组件支持 IE 10 及以上版本，无任何外部依赖，且与现有的 CSS 动画兼容。尽管不支持不同宽度元素的布局和基于高度的排序，但其性能和浏览器兼容性使其成为创建流畅、可靠布局的理想选择。

基本使用

安装

 npm install react-masonry-css
 pnpm install react-masonry-css
 yarn add react-masonry-css

基本使用

导入

 import Masonry from "react-masonry-css";

定义一个图片列表数组,其中里面每一项都是一个包含id和图片url 的对象

  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",
     },
   ];

定义断点配置项

 
   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组件

  <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文件, 然后在该文件引入

 .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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

css