瀑布流布局，响应式布局根据浏览器宽度自动计算展示图片列数react写+效果图

瀑布流布局（Masonry Layout）是一种常见的网站布局方式，尤其适用于显示大量图片或网格内容。它按照瀑布般的方式逐行放置元素，每行保持等高度，随着窗口大小的变化，元素会自动调整位置以适应屏幕。在React中实现瀑布流布局，通常需要结合CSS Grid或Flexbox，并利用JavaScript来处理动态加载和布局更新。

以下是一个简单的React瀑布流布局组件的示例，这里假设我们使用了`react-grid-layout`库：

import React from 'react';
import { Grid, Cell } from 'react-grid-layout';

const ResponsiveGrid = ({ items, cols }) => {
  const layout = {
    rows: items.map((item) => ({
      height: item.height,
      cells: [{ x: 0, y: 0, w: cols, h: item.height }],
    })),
  };

  return (
    <div className="grid-container">
      <Grid layout={layout} cols={cols}>
        {items.map((item) => (
          <Cell key={item.id} component="img" src={item.src} style={{ height: 'auto', width: '100%' }} />
        ))}
      </Grid>
    </div>
  );
};

// 使用时，传入一个数组描述每个图片元素（id、src、高度），以及所需的列数
<ResponsiveGrid items={['item1', 'item2', ...]} cols={4} />

这个组件会根据浏览器窗口的宽度动态调整图片的列数，当窗口缩小时，列数可能会减少，图片则按行堆叠。

对于响应式布局效果，你可以创建一个简单的CSS样式，比如：

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.cell {
  box-sizing: border-box;
}

至于生成预览图，由于这是一个文字描述，无法直接提供实际的效果图，但你可以根据以上代码自行在本地环境搭建并查看效果，或者在线上模拟器如CodeSandbox中测试。