zoukankan      html  css  js  c++  java
  • 极简瀑布流-摘自慕客网

    上家公司的时候,公司要求做个“瀑布流”,说这个主流,这是方向。然后就吭吭吭就去做了

    百度了下,实现“瀑布流”的方式,主要是两种,一种是固定行数,然后每行独立去增加;另一种是根据上一行最短的那个的高度去算第二行第一个出现的位置;

    当时直接用了taobao的KissY前端组件,实现很简单,如下:

    Js部分

    $(function () {
    
                KISSY.use("waterfall", function (S, Waterfall) {
                    new Waterfall({
                        container: "#container",    //节点容器
                        minColCount: 2,             //最小列数
                        colWidth: 290               //每列的宽度
                    });
                });
            })

    页面部分

     <div id='container' style="position: relative;">
            
        </div>
    

      

    今年的前段时间,看了<慕客网>的视频,摘下了如下代码,感觉不错。

    <html>
    <head>
        <meta charset="utf-8">
        <title>瀑布流</title>
        <style type="text/css">
            #main {
                position: relative;
            }
            .box {
                padding: 5px;
                float: left;
            }
            .pic {
                height: auto;
                padding: 5px;
                border: 1px solid gray;
                border-radius: 5px;
            }
                .pic img {
                     200px;
                }
        </style>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script>
            window.onload = function () {
                waterfall();
            }
            window.onscroll = function () {
                var lastBox = $("#main>div").last();
                var lastH = lastBox.offset().top + Math.floor(lastBox.outerHeight());
                var soc = $(window).scrollTop();
                var docHeight = $(window).height();
                if (lastH - docHeight - soc < 50) {
                    console.log("加载" + (lastH - docHeight - soc));
                    var jsonData = {
                        "data": [
                            { "src": "images/02.jpg" }, { "src": "images/03.jpg" },
                            { "src": "images/01.jpg" }, { "src": "images/02.jpg" },
                            { "src": "images/03.jpg" }, { "src": "images/04.jpg" },
                            { "src": "images/04.jpg" }, { "src": "images/02.jpg" },
                            { "src": "images/05.jpg" }, { "src": "images/04.jpg" },
                        ]
                    };
                    $(jsonData.data).each(function (i, item) {
                        var oBox = $("<div>").addClass("box").appendTo($("#main"));
                        var pic = $("<div>").addClass("pic").appendTo(oBox);
                        $("<img>").attr("src", item.src).appendTo(pic);
                    });
                    waterfall();
                }
            }
            function waterfall() {
                var $box = $("#main>div");
                var w = $box.eq(0).outerWidth();
                var cols = Math.floor($(window).width() / w);
                $("#main").width(w * cols).css("margin", "0 auto");
                var hArr = [];
                $box.each(function (i, item) {
                    var h = $box.eq(i).outerHeight();
                    if (i < cols) {
                        hArr[i] = h;
                    } else {
                        var minH = Math.min.apply(null, hArr);
                        var minInx = $.inArray(minH, hArr);
                        // console.log(minH + '--' + minInx);
                        $(item).css({
                            "position": "absolute",
                            "top": minH + "px",
                            "left": minInx * w + "px"
                        });
                        hArr[minInx] += $box.eq(i).outerHeight();
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="main">
            <div class="box">
                <div class="pic">
                    <img src="images/01.jpg" />
                </div>
            </div>
        </div>
    </body>
    </html>
    

      

  • 相关阅读:
    数据库字段太多,批量快速建立实体类方法(适合大量字段建立实体类)
    SQL service 中的 ”输入SQL命令窗口“ 打开了 “属性界面” 回到 ”输入SQL命令窗口“
    计算机软件编程英语词汇集锦
    编程常用英语词汇
    svn上传和下载项目
    当启动tomcat时出现tomcat setting should be set in tomcat preference page
    Implicit super constructor Object() is undefined for default constructor. Must define an explicit constructor
    eclipse中选中一个单词 其他相同的也被选中 怎么设置
    Spring Boot的@SpringBootApplication无法引入的问题
    最全的SpringCloud视频教程
  • 原文地址:https://www.cnblogs.com/jzb-dev/p/4759271.html
Copyright © 2011-2022 走看看