jQuery 瀑布流可以这样写

作者: 柏龙 | 来源:发表于2017-05-02 23:52 被阅读0次

瀑布流实现原理

  • 固定每一个 item 的宽度
  • 根据父级绝对定位
  • js 计算每一行可以排列几个 (父级总宽度 / item)= 排列个数
  • 写一个空数组 循环保存每一行的下标高度
  • 循环所有 item 获取当前行最小的高度和索引,改变当前的 lefttop 会用到
  • left 的值就是当前索引*item的宽度
  • top 的值就是当前索引的高度
  • 计算完以后重置当前索引的高度elHeight[minIndex] += 当前的高度,依次循环就可以了
  • 浏览器缩放时添加一个 resize 再从第三部重新计算宽度,然后循环数据,调整样式

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Waterfall flow</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        input,button,select,textarea{
            outline:none;border: none;
        }
        a{
            text-decoration: none;
        }
        ul,li{
            list-style: none;
        }
        img{
            border: none;
        }
        .wrap {
            position: relative;
            min-width: 440px;
            width: 90%;
            margin: 0 auto;
        }
        .item {
            width: 200px;
            margin: 10px;
            position: absolute;
            transition: all .6s ease-out;
            font-size: 50px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap"></div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script>
var WaterFall = {
    init: function(){
        // 添加 item 盒子
        this.addItem();
        // 添加好盒子就开始布局
        this.layout();
        // 改变窗口时执行
        this.resize();
    },
    addItem: function(){
        var wrap = $('.wrap');
        // 生成30个div 随机高度 和 颜色
        var item = '';
        for (var i = 0; i < 30; i++) {
            item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
        }
        wrap.append(item);
    },
    layout: function(){
        var elHeight = [];
        // 计算每一行可以存放几个 item 总宽 / item宽度
        var countWidth =  Math.floor( $('.wrap').width() / $('.item').width()); 
        // 初始化添加 第一行高度的下标  
        for (var i = 0; i < countWidth; i++) {
            elHeight[i] = 0;
        }
        // 循环 所有item  
        $('.item').each(function(index, el) {
            // apply 传入数组 取得最小的高度
            var minValue = Math.min.apply(null, elHeight);
            console.log(minValue)
            // 然后获取当前高度的索引
            var minIndex = elHeight.indexOf(minValue)
            // 修改当前的top 和 left 
            $(this).css({
                top: elHeight[minIndex],    // 获取当前索引对应的高度
                left: $(this).outerWidth(true) * minIndex   // 当前的left值为 索引 * 宽度(位于第几个)
            })
            // 当前索引的高度 += 当前 item 的高度 (比如计算第二排高度时, 就等于上一个的 top + 当前的高度)elHeight[0] += 90  下一次高度就为90 
            elHeight[minIndex] += $(this).outerHeight(true);
        });
    },
    resize: function(){
        $(window).resize(function() {
            WaterFall.layout();
        });
    },
    getRandColor: function(){
        var str = '1234567890abcdef';
        var colorStr = '#';
        for(var i =0; i < 6; i++){
            colorStr += str[ Math.floor(Math.random() * str.length) ];
        }
        return colorStr;
    }
}
WaterFall.init(); // 执行
</script>
</body>
</html>

在线查看

总结

瀑布流布局实现了,在数据多的情况下没有做浏览器滚动到底部时再加载数据,后续会补充。

相关文章

  • jQuery 瀑布流可以这样写

    瀑布流实现原理 固定每一个 item 的宽度 根据父级绝对定位 js 计算每一行可以排列几个 (父级总宽度 / i...

  • 瀑布流

    瀑布流jQuery瀑布流插件 Masonry:http://www.jq22.com/jquery-info362...

  • jquery 瀑布流

    瀑布流布局的特点: 【1】展示的图片元素都是等宽不等高,图片的位置用position:absolute定位来摆放。...

  • jQuery 瀑布流

    瀑布流的实现原理 要想实现瀑布流首先需要确定需要排列的内容,宽度需要一致; 设定父容器相对定位,需排列子元素绝对定...

  • jQuery瀑布流

    问题 瀑布流布局的原理是什么 1.计算找出高度最低的一列元素2.将新元素定位放至该列下3.该列高度+=新元素高度4...

  • jQuery瀑布流插件masonry使用教程

    瀑布流特别适合多图片布局加载,效果很理想。 masonry是基于jquery的瀑布流插件,简单实用,本文就以滑动无...

  • jQuery Wookmark 瀑布流

    下载地址:http://code.ciaoca.com/jquery/wookmark/

  • angular 插件介绍

    图片视频类 angular-maxonry图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery、...

  • Jquery 瀑布流(滚动加载)

    源码下载地址 实现思路 通过容器宽度 和每列的宽度 可以计算出列数。 数组来保存每一列的高度,当页面加载新的盒子时...

  • jquery瀑布流的原理

    什么是瀑布流,说话不形象,直接看图说话 ![S55M%73LKAKO@]OZ7D@MH.png](http://u...

网友评论

    本文标题:jQuery 瀑布流可以这样写

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