美文网首页
瀑布流思路

瀑布流思路

作者: 刘宏儿 | 来源:发表于2019-07-05 10:27 被阅读0次

外边一个大框相对定位,里面的div绝对定位
比如有三列,比较三列的高度,在最短的那一列排位,div的宽度都一样,高度是随机数。
效果如图:


1544614350(1).jpg

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        #box{
            /* 大盒子固定宽度 */
            width: 1200px;
            /* 设置相对定位 */
            position: relative;
            margin: 0 auto;
        }
        #box div{
            /* 设置绝对定位 */
            position: absolute;
            /* 所有div的值是相等的 */
            width: 380px;
            margin: 10px;
            background-color: #dedede;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
</body>
<script>
//数组用来记录有几列,每一列的top值
var arr = [//H表示top的值,col表示第几列
    {
        H:0,
        col:0
    },
    {
        H:0,
        col:1
    },
    {
        H:0,
        col:2
    }

];
function waterfall() {  

//随机数 div的高是随机数
function random(a,b) {//a,b代表a到b的随机数
       return Math.floor(Math.random()*(b-a+1))+a;
}
  for(var i=0;i<50;i++){//for循环随机产生50个div
        //动态的创建div标签
        var node = document.createElement("div");
        var h = random(300,600);
        node.style.height = h+"px";
        node.innerHTML="我是图片";
        node.style.lineHeight=h+"px";
        //比较H的值
        arr.sort(function (a,b) {
            if(a.H>b.H){
                return 1;
            }
            if(a.H<b.H){
                return -1;
            }
          })
        //经过排序之后,数组里的第一个值就是最小的
        node.style.left = arr[0].col*400+"px";
        node.style.top = arr[0].H+"px";
        box.appendChild(node);
        arr[0].H+=(h+20);//H叠加的值是下一个div的top值
        //计算一下文档的高度,将叠加后的值放到数组的第一个
        arr.sort(function (a,b) {
            if(a.H<b.H){
                return 1;
            }
            if(a.H>b.H){
                return -1;
            }
          })
        box.style.height = arr[0].H+"px";
  }
}
waterfall();
window.onscroll = function () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var ch = window.innerHeight || document.body.clientHeight;
    if(arr[0].H == scrollTop+ch){
        waterfall();
    }
  }
</script>
</html>

相关文章

  • 瀑布流思路

    外边一个大框相对定位,里面的div绝对定位比如有三列,比较三列的高度,在最短的那一列排位,div的宽度都一样,高度...

  • swift实现瀑布流

    类似瀑布流的使用场景很多. 实现瀑布流的关键节点: 实现cell的高度不同且没有规则的展示 这里整理实现瀑布流思路...

  • js瀑布流思路

    固定列数的瀑布流可以首先固定几个ul,不固定列数的瀑布流,就需要首先做一个数组,然后根据屏幕宽度决定创建几个列。

  • 瀑布流实现思路

    实现瀑布流,只需要重写 UICollectionViewLayout 类的3个方法: prepare 准备"当co...

  • oc通用瀑布流封装

    用途:现在许多的app首页展示基本都是瀑布流,电商的尤其常见 思路:瀑布流肯定是用collection view去...

  • 瀑布流

    一、瀑布流设计方案 不可取.png 过于复杂.png 最优方案.png 二、瀑布流设计思路分析 1、自定义流水布局...

  • waterfall瀑布流布局+动态渲染

    瀑布流典型网站 花瓣网、堆糖 [目录] 瀑布流布局原理大体思路具体思路 插件封装(5步) 动态渲染需求分析渲染第一...

  • OC 瀑布流详解

    空余时间整理了一下瀑布流的代码,今天总结一下,也说一下个人对于写瀑布流的理解。 先说一下大致思路。 一、写瀑布流实...

  • 瀑布流的实现思路

    瀑布流,将相同宽度,高度不等的元素(大多时候是图片),整齐平整的呈现在用户眼前,因为每个元素的高度不同,如果使用浮...

  • 瀑布流实现的思路

    准备阶段: 为了方便查阅:源码和静态页面放在了最后面 以下内容均为js代码,静态页面不动 1.渲染第一行 2.其他...

网友评论

      本文标题:瀑布流思路

      本文链接:https://www.haomeiwen.com/subject/evwphqtx.html