waterfall

最新推荐文章于 2024-05-01 15:53:08 发布

ForMyWebFrontSide

最新推荐文章于 2024-05-01 15:53:08 发布

阅读量659

点赞数

分类专栏： JQuery 瀑布流

本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/52184880

版权

JQuery 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

瀑布流

1 篇文章 0 订阅

订阅专栏

插件：http://www.jq22.com/jquery-info9336

http://www.cnblogs.com/2050/archive/2012/05/03/2480702.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            border: 1px solid red;
            margin: 50px auto 0;
            position: relative;
        }

        #container img {
            position: absolute;
        }

        #loader {
            width: 100%;
            height: 60px;
            background: url('loader.gif') no-repeat center #FFF;
            position: fixed;
            bottom: 0;
            left: 0;
            display: none;
        }

    </style>
</head>

<body>
<div id="container"></div>
<div id="loader"></div>
<!--<img onerror="javascript:this.src = 'default.jpg';" alt="">-->
</body>
<script src="../../jquery-1.11.3.min.js"></script>
<script>

    $(function () {
        var $oContainer = $('#container'),
                $oLoader = $('#loader'),
                iWidth = 200,
                iSpace = 10,
                iOuterWidth = iWidth + iSpace,
                iCells = 0,
                sUrl = 'http://www.wookmark.com/api/json/popular?callback=?',
                iPage = 0,
                iBtn = true,
                arrCells = [];


        setCellsAndContainer();
        /*init top and left*/
        initCellTopAndLeft();

        getData();

        $(window).on('scroll', function () {
            getDataAtBottom();
        });

        $(window).on('resize', function () {
            /*优化处理setCells();只有当列数发生变化，才调用，否则return*/
            var iOldCells = iCells;
            setCellsAndContainer();

            if(iOldCells == iCells){
                return;
            }

            getDataAtBottom();

            /*init top and left*/
            initCellTopAndLeft();
            var $aImgs = $oContainer.find('img');
            $aImgs.each(function () {
                //获取最短列的位置
                var iMinIndex = getShortestIndex();
                $(this).animate({
                    left: arrCells[iMinIndex].left,
                    top: arrCells[iMinIndex].top
                });
                arrCells[iMinIndex].top += $(this).height() + 10;
            });
        });


        function getData() {
            if (!iBtn) {
                return;
            }
                iBtn = false;
                iPage++;
                $.getJSON(sUrl, {page:iPage}, function (data) {
                    $('#loader').show();
                    //data is a Array
                    $.each(data, function (index, obj) {
                        var $oImg = $('<img onerror="javascript:this.src=\'default.jpg\';this.onerror=null">');


                        var iHeight = iWidth / obj.width * obj.height;

                        $oImg.css({
                            width: iWidth,
                            height: iHeight ? iHeight : 240 //防止iHeight没有值
                        });

                        //获取最短列的位置
                        var iMinIndex = getShortestIndex();

                        $oImg.css({
                            left: arrCells[iMinIndex].left,
                            top: arrCells[iMinIndex].top
                        });



                        arrCells[iMinIndex].top += iHeight + 10;


                        $oContainer.append($oImg);

                        var objImg = new Image();

                        objImg.onload = function(){
                            $oImg.attr('src', this.src);
                        }
                        $oImg.attr('src', obj.preview);

                        setTimeout(function() {
                            $('#loader').hide();
                        },1000);

                        iBtn = true;
                    })
                });



        }

        function getDataAtBottom() {
            var iShortestIndex = getShortestIndex();
            var iH = $(window).scrollTop() + $(window).innerHeight();
            document.title = iH + ':' + (arrCells[iShortestIndex].top + 50);
            if (arrCells[iShortestIndex].top + $oContainer.offset().top <= iH) {
                getData();
            }
        }


        function getShortestIndex() {
            var iv = arrCells[0].top;
            var _index = 0;
            for (var i = 1; i < arrCells.length; i++) {
                if (arrCells[i].top < iv) {
                    _index = i;
                }
            }
            return _index;
        }

        function initCellTopAndLeft() {
            for (var i = 0; i < iCells; i++) {
                arrCells[i] = {};
                arrCells[i].top = 0;
                arrCells[i].left = i * iOuterWidth;
            }
        }


        function setCellsAndContainer() {
            if (iCells < 3) {
                iCells = 3;
            }
            else if (iCells > 6) {
                iCells = 6;
            }
            iCells = Math.floor($(window).innerWidth() / iOuterWidth);
            $oContainer.css('width', iOuterWidth * iCells - iSpace);
        }

    })
</script>
</html>