瀑布流的实现

[nianxiongdi]

如何使用js实现瀑布流图片

css简单实现

.container{
Columns-width: 300px;
Column-gap: 5px;
}
.container div {
Width: 300px;
margin: 5px;
}

js实现方式
html页面

    <div class="container" id="container">
        <div class="box">
            <div class="box_img">
                <img src="./img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="./img/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="./img/3.jpg">
            </div>
        </div>
        <!--  .....假设有多张图片 -->
    </div>

css样式 - 使用float布局

*{
    margin: 0px;
    padding: 0px;
} 
.container {
    position: relative;
} 

.box {
    padding: 5px;
    float: left;
}

.box_img {
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
}

.box_img img {
    width: 150px;
    height: auto;
}

效果图

dom中获取图片的高度与宽度

• 图片高度 - ccontent[i].offsetHeight
• 图片宽度 - ccontent[0].offsetWidth
• 图片距离浏览器左边的位置ccontent[minIndex].offsetLeft

解决问题

• 如何横排显示? float布局
• 如何解决不同的高度的图片,直接没有空隙? 找到一个最小的图片,进行累加
• 一张图片如何确定位置? -
  1. 计算一列有多少个图片document.documentElement.clientWidth / imgWidth
  2. 初始化当前列的最小的高度BoxHeightAr数组 (初始化是第一列的高度)
  3. 循环图片,找到当前列的最小的高度的下标, 利用绝对定位,对当前图片进行top和left
  4. top的计算 - ccontent[i].style.top =minheight + 'px';
  5. left的计算 - ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';
  6. 更新当前最小BoxHeightAr数组,更新当前列的高度 BoxHeightAr[minIndex] = BoxHeightAr[minIndex] + ccontent[i].offsetHeight;
• 如何滑动?
  • offsetTop - 利用获取最后一图片,屏幕距离顶部的距离
  • scrollTop - 图片滑动的距离
  • clientHeight - 浏览器当前的高度
  • 判断条件 - lastContentHeight < scrollTop + pageHeight

function checkFlag() {
    var cparent = document.getElementById('container');
    var ccontent = getChildElement(cparent, 'box');

    // 最后一张图片,距顶部的宽度
    // console.log(ccontent[ccontent.length - 1].offsetTop);
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;

    // 图片滑动的距离
    var scrollTop = document.documentElement.scrollTop|| 
        document.body.scrollTop;
    
    // 页面的高度
    var pageHeight = document.documentElement.clientHeight ||
        document.body.clientHeight;
    console.log(lastContentHeight, scrollTop, pageHeight)
    if(lastContentHeight < scrollTop + pageHeight) {
        return true;
    }

}