手写瀑布流—345等高瀑布流布局

古城微笑少年丶 2023-01-18 09:17 90阅读 0赞

### 1.初始布局 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

import React from 'react';
    import './index.css';
    
    function HeightFall() {
      return (
          <div className="container">
            <div className="image-item">
              <img src="./images/1.png" alt=""></img>
            </div>
            <div className="image-item">
              <img src="./images/2.png" alt=""></img>
            </div>
            <div className="image-item">
              <img src="./images/3.jpg" alt=""></img>
            </div>
            <div className="image-item">
              <img src="./images/1.png" alt=""></img>
            </div>
            <div className="image-item">
              <img src="./images/2.png" alt=""></img>
            </div>
            <div className="image-item">
              <img src="./images/3.jpg" alt=""></img>
            </div>
            <div className="image-item">
              <img src="./images/1.png" alt=""></img>
            </div>
            <div className="image-item">
              <img src="./images/2.png" alt=""></img>
            </div>
          </div>
      );
    }
    
    export default HeightFall;

.container {
        display: flex;
        flex-wrap: wrap;
    }
    .image-item {
        height: 200px;
        margin: 5px;
    }
    .image-item img {
        height: 100%;
    }

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 2.优化布局 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

### 3.处理最后一行 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20221021/36d6b5fb34e7415d8567e72da586ffbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20221021/6e8ea18e3eb84fea9bf8bba489da1e84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20221021/ceaa8061c8e84e72b4bb9ce0f0d3255d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20221021/42544fe2725d46e7ba33c910c02127d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20221021/4d8f70069fee4424b771e1aa469dc25c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20221021/c3b7a624937341a584dc038ed5c7d14f.png