JavaScript||瀑布流布局初体验

快来打我* 2023-03-13 03:52 2阅读 0赞

## 瀑布流是什么 ##

瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局。  
瀑布流的主要特质是：定宽而不定高 ；视觉表现为参差不齐的多栏布局。  
最早采用此布局的网站是Pinterest，逐渐在国内流行开来。  
下面放一张图说明：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]

## 瀑布流效果实现 ##

**1）GitHub下载瀑布流效果文件和jQuery**  
瀑布流效果链接：https://github.com/desandro/masonry  
jQuery下载链接：https://jquery.com/download/

**2）将下载好的文件引入本次项目中**  
![在这里插入图片描述][20200510223034397.PNG]  
**3）页面布局**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>瀑布流布局初体验</title>
            <style>
                div[class^='grid-item']{ 
                    width: 200px;
                    border: 1px solid black;
                }
                .grid-item-1{ 
                    height: 100px;
                    background-color: coral;
                }
                .grid-item-2{ 
                    height: 150px;
                    background-color: goldenrod;
                }
                .grid-item-3{ 
                    height: 120px;
                    background-color:crimson;
                }
                .grid-item-4{ 
                    height: 90px;
                    background-color: greenyellow;
                }
            </style>
        </head>
        <body>
            <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
                <div class="grid-item-1 grid-item"></div>
                <div class="grid-item-2 grid-item"></div>
                <div class="grid-item-3 grid-item"></div>
                <div class="grid-item-4 grid-item"></div>
              </div>
        </body>
    </html>

布局后页面效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]  
**4）逻辑实现**  
其实就是导入刚刚在GitHub下载的文件并应用。代码如下：

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]  
**5）其他**  
为了更直观的感受瀑布流布局，在此前基础上添加一些框架。完整index.html 代码如下：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>瀑布流布局初体验</title>
            <style>
                div[class^='grid-item']{ 
                    width: 100px;
                    border: 1px solid black;
                }
                .grid-item-1{ 
                    height: 200px;
                    background-color: coral;
                }
                .grid-item-2{ 
                    height: 150px;
                    background-color: goldenrod;
                }
                .grid-item-3{ 
                    height: 120px;
                    background-color:crimson;
                }
                .grid-item-4{ 
                    height: 190px;
                    background-color: greenyellow;
                }
            </style>
        </head>
        <body>
            <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
                <div class="grid-item-1 grid-item"></div>
                <div class="grid-item-2 grid-item"></div>
                <div class="grid-item-3 grid-item"></div>
                <div class="grid-item-4 grid-item"></div>
                <div class="grid-item-1 grid-item"></div>
                <div class="grid-item-2 grid-item"></div>
                <div class="grid-item-3 grid-item"></div>
                <div class="grid-item-4 grid-item"></div>
                <div class="grid-item-1 grid-item"></div>
                <div class="grid-item-2 grid-item"></div>
                <div class="grid-item-3 grid-item"></div>
                <div class="grid-item-4 grid-item"></div>
                <div class="grid-item-1 grid-item"></div>
                <div class="grid-item-2 grid-item"></div>
                <div class="grid-item-3 grid-item"></div>
                <div class="grid-item-4 grid-item"></div>
              </div>
        </body>
        <script src="jquery-3.5.1.min.js"></script>
        <script src="masonry.pkgd.min.js"></script>
        <script>
            $('.grid').masonry({ 
                // options...
                itemSelector: '.grid-item',
                columnWidth: 200
            });
        </script>
    </html>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]

## 最终效果浏览 ##

基于js的瀑布流初体验

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/ef56de6e58c446fda009c47bf161a583.png
[20200510223034397.PNG]: /images/20230312/7826cfda87f04f6a96b49821d7c5b8a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/a87c10f6e9b44682ab2832e89a5f5d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]: /images/20230312/90e52f5a6e7e4bcdb42c76019903016f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]: /images/20230312/c587db4dee8a4c2ca2be41c247c150f5.png