前端开发项目瀑布流总结

企业级前端开发框架 前端开发用的什么框架吗 松鼠前端开发框架

简单总结一下瀑布流的原理:
1、先规划好自己的布局,如一个页面有4列图片
2、获取这4列图片中最低的一个元素高度
3、遍历这4列元素,找出最低的一个元素
4、将要添加的图片添加到最低的元素中,将以上几步封装在一个函数里面
5、在触发滚动条滚动的时候触发这个函数
以此类推… …
简单的瀑布流就完成了!

直接上代码
代码片段 1

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>瀑布流布局</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap {
            width: 100%;
            margin: 0 auto;
        }
        .wrap h2 {
            height: 60px;
            line-height: 60px;
            background: #333;
            color: #fff;
            padding-left: 200px;
        }
        .wrap .cont {
            width: 1000px;
            margin: 0 auto;
        }
        .cont ul {
            float: left;
            margin: 0 25px;
        }
        .cont ul li {
            width: 200px;
            height: 80px;
            background: #dcdcdc;
            margin: 10px 0;
        }
        .cont ul li.a1 {
            background: #3cf;
            height: 100px;
        }
        .cont ul li.a2 {
            background: #cf3;
            height: 180px;
        }
        .cont ul li.a3 {
            background: #fc3;
            height: 150px;
        }
        .cont ul li.a4 {
            background: #3fc;
            height: 240px;
        }
        .cont ul li.a5 {
            background: #ff00ff;
            height: 240px;
        }
        .cont ul li.a6 {
            background: #8400ff;
            height: 300px;
        }
        .cont ul li.a7 {
            background: #ff0000;
            height: 50px;
        }
        .clear {
            clear: both;
        }
    </style>
    <script src=”http://libs.baidu.com/jquery/1.11.3/jquery.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            // 先获取页面中ul中的最小高度
            function appendLi() {
                var ulList = $(‘.cont ul’);
                var ul1_h = ulList[0].offsetHeight;
                var ul2_h = ulList[1].offsetHeight;
                var ul3_h = ulList[2].offsetHeight;
                var ul4_h = ulList[3].offsetHeight;
                var minUl = Math.min(ul1_h, ul2_h, ul3_h, ul4_h); // 获取ul中最小的高度
                var min_ul = ”;
                var lis = ”;
                for (var i = 0; i < ulList.length; i++) {
                    if (ulList[i].offsetHeight == minUl) { // 比较ul中最小的一个
                        min_ul = ulList[i];
                    }
                    lis = ‘<li class=”a’ + getRandom(10) + ‘”></li>’;
                }
                $(min_ul).append(lis); // 最小的元素下面添加li
            }
            for (var i = 0; i < 14; i++) { // 页面一加载就循环添加 可去掉
                appendLi();
            }
            // 生成随机数
            function getRandom(n) {
                return Math.floor(Math.random() * n + 1)
            }
            // 当滚动条滚动的时候 触发函数
            window.onscroll = function () {
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                var docH = document.documentElement.offsetHeight;//整个文档高度
                var winH = document.documentElement.clientHeight;//窗口高度
                if (docH – winH – 100 < scrollTop) {
                    appendLi();
                }
                // 窗口的高+滚动条距离顶部的距离 = 文档的高度
                // 文档的高度 – 窗口的高度 = 滚动条距离顶部的距离
                // 文档的高度 – 窗口的高度 – 100 < 滚动条距离顶部的距离
                // 最终得到的可以用另一句话说 滚动条距离底部100像素
            }
        })
    </script>
</head>
<body>
    <div class=”wrap”>
        <h2>瀑布流展示:</h2>
        <div class=”cont”>
            <ul>
                <li class=”a1″></li>
            </ul>
            <ul>
                <li class=”a2″></li>
            </ul>
            <ul>
                <li class=”a3″></li>
            </ul>
            <ul>
                <li class=”a4″></li>
            </ul>
            <div class=”clear”></div>
        </div>
    </div>
</body>
</html>
网站前端框架开发是什么 前端开发框架的优缺点 前端组件开发框架
» 本文来自:前端开发者 » 《前端开发项目瀑布流总结》
» 本文链接地址:https://www.rokub.com/5495.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!