瀑布流

最新推荐文章于 2022-08-21 16:15:57 发布

llx18042693031

最新推荐文章于 2022-08-21 16:15:57 发布

阅读量296

点赞数 1

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/llx18042693031/article/details/51334703

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

瀑布流写法(一)

概述:在4个ul内通过循环添加li,每次循环可以添加20个li.每次新产生的li都会被添加到最短的ul中去.(外加两个其它的小功能,当滚轮向下滑动时可以重新添加20个li,点击红色原点可以返回顶部)

定义css样式

        <style type="text/css">
            .wrap{
                width: 850px;
                border: 1px solid red;
                overflow: hidden;
                margin: 0 auto;
            }
            .wrap ul{
                width: 200px;
                /*height: 100px;*/
                float: left;
                box-sizing: border-box;
                margin-left: 10px;
                /*margin-bottom: 10px;*/
                padding: 10px;
            }
            .wrap ul li{
                list-style: none;
                text-align: center;
                font-size: 50px;
                line-height:100px ;
                margin-bottom: 10px;
                background-color: #CCCCCC;

            }
            .back{
                width: 40px;
                height: 40px;
                border-radius: 40px;
                background-color: red;
                position: fixed;
                right: 30px;
                bottom: 0;
            }
        </style>

一些基础样式,可以自行了解,

设置body样式

<body>
        <div class="wrap">
            <ul>
                <!--<li>1</li>-->
            </ul>
            <ul>
                <!--<li>2</li>-->
            </ul>
            <ul>
                <!--<li>3</li>-->
            </ul>
            <ul>
                <!--<li>4</li>-->
            </ul>
            <div class="back"></div>
        </div>
    </body>

body中的li是一开始设置css时候用来观察布局的,后期用js循环创建li,

js部分

    <script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var uls = document.getElementsByTagName("ul");
        var back = document.querySelector('.back');
        var timer = null;

        function randh(min,max){
            return parseInt(Math.random()*(max-min+1))+min;
        }
        function creatli(){

        for (var i=0;i<20;i++) {

            var li = document.createElement("li");
            li.innerHTML = i;
            li.style.height = randh(100,300)+"px";

            //用第一列ul的高度依次与其它几列ul比较,在最小的ul中添加li
            var minh = uls[0].offsetHeight;
            var mini = 0;

            for (var j=0;j<uls.length;j++) {
                    if(minh > uls[j].offsetHeight){
                        minh = uls[j].offsetHeight;
                        mini = j;
                    }
                    uls[mini].appendChild(li);
            }
        }

        }

        creatli();

        window.onscroll = function(){
            var windowh = document.documentElement.clientHeight;
            var bodyh = document.documentElement.offsetHeight;
            var rollh = bodyh - windowh;
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            if(rollh == top){
                creatli();
            }
        }

        back.onclick = function(){
                var start = document.body.scrollTop || document.documentElement.scrollTop;
                var end = 0;
                t = 0;
                d = 20;
                clearInterval(timer);
            timer = setInterval(function(){
                t++;
                if(t >= d){
                    clearInterval(timer);
                }
                var speed = Tween.Back.easeIn(t,start,end-start,d);
                document.body.scrollTop = speed;
            },30)
        }

返回顶部时调用了tween.js中的代码,所以引用.

获取变量:

var uls = document.getElementsByTagName("ul");
        var back = document.querySelector('.back');
        var timer = null;

随机数代码:

function randh(min,max){
            return parseInt(Math.random()*(max-min+1))+min;
        }

随机数函数的作用是,每当新创建出一个li时,给新的li赋新的值,而这个值是由随机函数产生的,这样每一个li都有不同的高度,

创建li函数:

        for (var i=0;i<20;i++) {

            var li = document.createElement("li");
            li.innerHTML = i;
            li.style.height = randh(100,300)+"px";

            //用第一列ul的高度依次与其它几列ul比较,在最小的ul中添加li
            var minh = uls[0].offsetHeight;
            var mini = 0;

            for (var j=0;j<uls.length;j++) {
                    if(minh > uls[j].offsetHeight){
                        minh = uls[j].offsetHeight;
                        mini = j;
                    }
                    uls[mini].appendChild(li);
            }
        }

        }

首先通过循环产生20个li,然后在循环内创建li(var li = document.createElement(“li”);),然后把i的值赋给相应的li内.
li.style.height = randh(100,300)+”px”;给每一个li产生随机的高度,但是高度在100~300内取出.
因为我们要找出最短的ul列,然后将新的li添加进去,所以先设置了两个变量minh与mini

var minh = uls[0].offsetHeight;
var mini = 0;

把第一个ul的高度赋给minh,然后下边利用一个循环依次和其它的ul比较.mini是用来储存最短ul下标的,以便后期将li添加到最短ul中.
下边利用循环找出最短ul,然后进行添加li

for (var j=0;j<uls.length;j++) {
        if(minh > uls[j].offsetHeight){
            minh = uls[j].offsetHeight;
            mini = j;
                    }
            uls[mini].appendChild(li);
            }

在这里ul一共是4个,所以uls.length也可以用4来代表,下一篇会分享一个自适应宽度的瀑布流.
minh > uls[j].offsetHeight,利用第一个ul逐个和其它的ul比较,如果新的ul小于minh,将新的ul高度赋值给minh,将最短ul的下标赋值给mini.最后把li最短ul内.

附加功能

鼠标向下滚动时继续产生li

window.onscroll = function(){
            var windowh = document.documentElement.clientHeight;
            var bodyh = document.documentElement.offsetHeight;
            var rollh = bodyh - windowh;
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            if(rollh == top){
                creatli();
            }
        }

回滚函数

back.onclick = function(){
                var start = document.body.scrollTop || document.documentElement.scrollTop;
                var end = 0;
                t = 0;
                d = 20;
                clearInterval(timer);
            timer = setInterval(function(){
                t++;
                if(t >= d){
                    clearInterval(timer);
                }
                var speed = Tween.Back.easeIn(t,start,end-start,d);
                document.body.scrollTop = speed;
            },30)
        }