js实现图片瀑布流布局

间接性踌躇满志，持续性混吃等死

于 2020-06-15 00:18:43 发布

阅读量454

点赞数

本文链接：https://blog.csdn.net/weixin_45846312/article/details/106754700

版权

本文介绍了如何使用JavaScript实现图片瀑布流布局。通过创建一个大模块bigblock，追加子元素存放小图，利用offset属性确定图片位置，并动态调整最大块高度。通过window.onload事件加载图片，结合滚动条事件，当滚动到离页面底部10px时自动加载更多图片，实现无缝滚动加载效果。

摘要由CSDN通过智能技术生成

过程：

创建一个放所有图片的模块bigblock。
获取这个大模块，追加一个子元素块来放小图。
封装一个函数list(n)来存放50张图片，并且将每张图追加放入空数组ele[]中。
封装一个函数set_position（），来确定每个图片的位置，用到了offsetHeight，offsetTop，offsetWidth等属性，同时给最大块也设置动态的高度，随着加载的图片数量增多，最大块的高度也随着增高。
使用 window.onload事件，加载图片更方便。
给浏览器的滚动条添加事件，让滚动条滑到body的可视区域最底部以上10px 时，加载出新的30张图片，并且每次滚动条停留在到刚加载的图片位置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>photo瀑布流</title>
    <style>
        *{
   
            margin:0;
            padding:0;
        }
        body{
   
           /* background: #ebebeb;*/
            background: url(./img/bging2.jpg );
            background-size:100% ;
            height:100%;
        }
        .bigblock {
   
            position: relative;
            width:650px;
            min-height: 200px;
            background: #fff;
            margin:auto;

        }
        .smallblock{
   
            position:absolute;
            width: