web api 原生实现瀑布流效果

最新推荐文章于 2022-04-14 13:15:00 发布

吴羿彤

最新推荐文章于 2022-04-14 13:15:00 发布

阅读量341

点赞数 1

分类专栏：小白

本文链接：https://blog.csdn.net/wuyitong116/article/details/90734308

版权

最近在整理js基础知识，接触到了几个常用的页面特效，其中觉得用原生js实现瀑布流的案例十分有趣，于是与大家分享一下。

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部

实例：
直接复制代码自己下载几个图片配置图片即可

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>瀑布流效果实现</title>
    <script type="text/javascript">
        window.onload = function () {
            waterFall();
            function waterFall() {
                // 获取父元素
                var oParent = document.getElementById("main");
                // 获取每一个小方块
                var aPin = document.querySelectorAll('.pin')
                // 获取小方块的宽  每一个小方块的款都一致
                var iPinW = aPin[0].offsetWidth;
                var widht = document.documentElement.clientWidth || docume

最低0.47元/天解锁文章

吴羿彤

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web api 原生实现瀑布流效果

最近在整理js基础知识，接触到了几个常用的页面特效，其中觉得用原生js实现瀑布流的案例十分有趣，于是与大家分享一下。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部实例：直接复制代码自己下载几个图片配置图片即可<!doctype html><html>&...
复制链接

扫一扫