jQuery动态加载瀑布流

深碍√TFBOYSˉ_ 2022-12-02 10:53 303阅读 0赞

## jquery实现瀑布流 ##

### 案例分析 ###

*  首先，它的每个图片是等宽的
 *  其次，除第一排正常显示其余的图片都会显示在上一排中高度最小的那个图片的下面
 *  最后，就是根据最矮图片所在位置的宽高来，决定绝对定位设置图片显示的位置

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]

### 实现步骤 ###

*  html结构

*  css样式

具体就是对每个box`div`浮动并设置样式

* {
        
                padding: 0;
                margin: 0;
            }
    
            .box {
        
                position: relative;
                float: left;
                margin: 10px;
            }
    
            .content {
        
                padding: 15px;
                border: 1px solid #ccc;
                box-shadow: 0 0 5px #ccc;
                border-radius: 10px;
            }
    
            .content img {
        
                width: 200px;
                height: auto;
            }

*  js(jquery)代码

主要是根据一排中高度最小的宽度个高度进行绝对定位的设置

## 根据鼠标的滚动动态的加载图片 ##

## 案例分析 ##

> 这里的动态是主要是模仿动态加载数据(伪动态)

*  首先，根据鼠标滚动的大小和界面的高度判断是否要动态加载
 *  其次，就是访问数据，并动态形成jquery数据类型
 *  最后，把生成的数据追加的`.container`中进行显示

### 效果图 ###

![aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL3poYW9qaWFsZTE1MzMzL2dpdGRlbW8vJUU1JThBJUE4JUU2JTgwJTgxJUU3JTgwJTkxJUU1JUI4JTgzJUU2JUI1JTgxLmdpZg][]

### 实现步骤 ###

*  `html`和`css`的代码都一样这里就不重复写了
 *  js代码

主要是判断什么时候新增图片数据，新增后插入到模板就行了

其中的dataImg就是模仿的假数据

var dataImg = {
         'data': [{
         'src': '1.jpg' }, {
         'src': '2.jpg' }, {
         'src': '3.jpg' }, {
         'src': '4.jpg' }] }
                window.onscroll = function () {
        
                    if (scrollside()) {
        
                        $.each(dataImg.data, function (index, value) {
        
                            var html = `<div class="box">
                                <div class="content"><img src="./image/${
          value.src}" alt=""></div>
                                </div>`
                            $(html).appendTo($('.container'))
                        })
                        imgLocation()
                    }
                }
                function scrollside() {
        
                    var box = $('.box')
                    var lastboxHeight = box.last().get(0).offsetTop
                    var documentHeight = document.body.scrollHeight + 130
                    var scrollHeight = $(document).scrollTop()
                    console.log(lastboxHeight, scrollHeight, documentHeight)
                    return (lastboxHeight < scrollHeight + documentHeight) ? true : false
                }
    
    
    
    
    oxHeight, scrollHeight, documentHeight)
                    return (lastboxHeight < scrollHeight + documentHeight) ? true : false
                }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d0cf559dcde24ce5a6075537e49385e7.png
[aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL3poYW9qaWFsZTE1MzMzL2dpdGRlbW8vJUU1JThBJUE4JUU2JTgwJTgxJUU3JTgwJTkxJUU1JUI4JTgzJUU2JUI1JTgxLmdpZg]: /images/20221123/c6310a73b67a4395a172cb8762e49d63.png