75.手机端图片瀑布流的加载代码和效果

http://www.bin012.com/index.php?route=product/product&path=63&product_id=52

效果在https://m.zqins.com/xiaoguotu/?hx=135&&lx=&&fg=&&jb=查看

 html:

<section class="effect-tab-content clearfloat">

<div class="container">

<div class="content">
</div>
<div class='load-more'><i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>滑到最底部加载更多</div>
</div>
</section>

 

js:

;(function() {
    function WaterFull(ele, opts) {
        this.ele = this._selector(ele);
        this.conWidth = this.ele.offsetWidth;
        this.defaults = {
            type: 2,
            urlField: 'url',
            widthField: 'width',
            heightField: 'height',
            countField:'count',
            idField:'id',
            didField:'did',
            titleField:'title'
        };
        this.opts = this._extend({}, this.defaults, opts);
        this._init();
    }

    WaterFull.prototype = {

        _init: function() {
            var listNode = document.createElement('div');
            listNode.id = 'wf-container';
            listNode.style.width = '100%';
            this.$listNode = listNode;
            this.ele.appendChild(listNode);
        },

        create: function(dataArr) {
            var type = this.opts.type,
                str = '';
            if (!type || !dataArr.length) {
                return;
            }
            switch (type) {
                case 1:
                    str = this.createFirst(dataArr);
                    break;
                case 2:
                    str = this.createSecond(dataArr);
                    break;
                case 3:
                    str = this.createThird(dataArr);
                    break;
                default:
                    return;
            }

            this.$listNode.innerHTML += str;

            if (type === 2) {
                this.secondeReflows();
            }
        },
        createFirst: function(dataArr) {
            var _this = this,
                result = dataArr.map(function(item, index) {
                    return '<div class="wf-item wf-item-1" style="background-image: url('+item[_this.opts.urlField]+');"></div>';
                });
            return result.join('');
        },
        createSecond: function(dataArr) {
            var _this = this,
                result = dataArr.map(function(item, index) {
                    var height = _this._countRate(item[_this.opts.widthField], item[_this.opts.heightField])+20 + 'px';
                    console.log()
                    return '<a href="/Minfos/'+item[_this.opts.idField]+'.html"><div  class="wf-item wf-item-2" style="height: '+height+';">' +
                        '<img src="'+item[_this.opts.urlField]+'" alt=""><p>'+item[_this.opts.titleField]+'</p><b><i>'+item[_this.opts.countField]+'</i><i>张</i></b></div></a>';
                });
            return result.join('');
        },
        secondeReflows: function() {
            var container = document.getElementById('wf-container'),
                itemList = Array.prototype.slice.call(document.getElementsByClassName('wf-item-2')),
                marginVal = this.conWidth * 0.02,
                columnHeightArr = [];
            itemList.forEach(function(item, index) {
                if (index < 2) {
                    columnHeightArr[index] = item.offsetHeight + marginVal;
                } else {
                    var minHeight = Math.min.apply(null, columnHeightArr),
                        minHeightIndex = columnHeightArr.indexOf(minHeight);

                    item.style.position = 'absolute';
                    item.style.top = minHeight + 'px';

                    if (minHeightIndex !== 0) {
                        item.style.left = '49%';
                    }

                    columnHeightArr[minHeightIndex] += item.offsetHeight + marginVal;
                }
            });
            container.style.minHeight = Math.max.apply(null, columnHeightArr) + 'px';
        },
        createThird: function(dataArr) {
            var max = dataArr.length,
                template = [],
                contentWidth = this.conWidth,
                _this = this;

            for (var i = 0; i < max; i += 2) {
                template.push(countPicList(dataArr[i], dataArr[i+1]));
            }
            function countPicList(pic1, pic2) {
                if (!pic2) { 
                    var rate = _this._countRate(pic1[_this.opts.widthField], pic1[_this.opts.heightField]),
                        height = 100 * rate + '%';
                    return '<div class="wf-item" style="padding-bottom:'+height+'; width:100%; background-image:url('+pic1[_this.opts.urlField]+')"></div>';
                } else { 
                    var rate1 = _this._countRate(pic1[_this.opts.widthField], pic1[_this.opts.heightField]),
                        rate2 = _this._countRate(pic2[_this.opts.widthField], pic2[_this.opts.heightField]),
                        totalRate = rate1 + rate2,
                        width1 = rate2 / totalRate * 98,
                        width2 = rate1 / totalRate * 98,
                        height = width1 * rate1;
                    return '<div style="overflow: hidden;">' +
                        '<div class="wf-item" style="padding-bottom:'+height+'%; width:'+width1+'%; background-image:url('+pic1[_this.opts.urlField]+')"></div>' +
                        '<div class="wf-item" style="padding-bottom:'+height+'%; width:'+width2+'%; float:right; background-image:url('+pic2[_this.opts.urlField]+')"></div>' +
                        '</div>';
                }
            }
            return template.join('');
        },
        _countRate: function(width, height) {
            return height ;
        },
        _extend: function() {
            var args = Array.prototype.slice.call(arguments),
                len = args.length,
                obj = null, i;
            for (i = 0; i < len; i ++) {
                if (typeof(args[i]) !== 'object') {
                    break;
                }
                if (i !== 0) {
                    for (var o in args[i]) {
                        if (args[i].hasOwnProperty(o)) obj[o] = args[i][o];
                    }
                } else {
                    obj = args[0];
                }
            }
            return obj;
        },
        _selector: function(ele) {
            if (!ele) {
                return;
            }
            return document.querySelector(ele);
        }
    }
    window.WaterFull = WaterFull;
})();
if (typeof module !== 'undefined') {
    module.exports = window.WaterFull;
} else if (typeof define === 'function' && define.amd) {
    define([], function () {
        'use strict';
        return window.WaterFull;
    });
}
window.onload = function() {
function ajax_all(num) {
        var strUrl = window.location.href;
            arrUrl = strUrl.split("/");
            strPage = arrUrl[arrUrl.length-1];
    if(strPage==""){
        var lyr_url = "https://m.zqins.com/Mko/?i=" + num
            listType = 2,
            contentDom = document.querySelector('.content'),
            loadMoreDom = document.querySelector('.load-more'),
            wtf = [];
        $.ajax({
            type: "POST",
            url: lyr_url,
            data: {},
            dataType: 'json',
            async: false,
            success: function (data) {
               var dataArr = data;
                 if(data.length<5){
                    $(".load-more").html("<section class=\"all-end\">\n" +
                        "    <i><img src=\"/public/static/sj/img/icon/icon-end.png\" alt=\"\"></i>\n" +
                        "    <p></p>\n" +
                        "    <span>已经翻到底啦</span>\n" +
                        "</section>")
                }
               var  wtf = new WaterFull('.content', {
                        type: listType,
                        urlField: 'src'
                    });
                    wtf.create(dataArr);
                $(window).scroll(function () {
                    var scrollTop = $(this).scrollTop();
                        scrollHeight = $(document).height();
                        windowHeight = $(this).height();
                        scrollHeights=scrollHeight-70;
                    if (scrollTop + windowHeight > scrollHeights) {
                        $('.load-more').click();
                    }
                })
                loadMoreDom.onclick = function () {
                    num = num + 5;
                    ajax_all(num);
                    console.log(dataArr)
                    // wtf.push(dataArr);
                }
               
            }
        })
     }else {
            var selectUrl = strPage.split("?")[strPage.split("?").length - 1];
            var f = $(".pd").val()
            if (f == 'selet') {
                var lyr_url = '/Mko/?' + selectUrl + '&&n=' + num;

            } else if (f == 'meffect') {
                var lyr_url = '/Mko/?' + selectUrl + '&&i=' + num;
            } else if (f == 'img') {
                var lyr_url = '/Mko/?' + selectUrl + '&&c=' + num;
            } else if (f == 'imgs') {
                var lyr_url = '/Mko/?' + selectUrl + '&&t=' + num;
            }
        $.ajax({
            // cache: false,
            type: "POST",
            url: lyr_url,
            data: {},
            dataType: 'json',
            async: false,
            success: function (data) {
                var dataArr = data;

                        if(data.length<5){
                           $(".load-more").html("<section class=\"all-end\">\n" +
                        "    <i><img src=\"/public/static/sj/img/icon/icon-end.png\" alt=\"\"></i>\n" +
                        "    <p></p>\n" +
                        "    <span>已经翻到底啦</span>\n" +
                        "</section>")
                }
                var listType = 2,
                    contentDom = document.querySelector('.content'),
                    loadMoreDom = document.querySelector('.load-more'),
                    wtf = [];
               var  wtf = new WaterFull('.content', {
                        type: listType,
                        urlField: 'src'
                    });
                    wtf.create(dataArr);
                $(window).scroll(function () {
                    var scrollTop = $(this).scrollTop();
                    var scrollHeight = $(document).height();
                    var windowHeight = $(this).height();
                    var scrollHeights=scrollHeight-70;
                    if (scrollTop + windowHeight > scrollHeights) {
                        $('.load-more').click(); 
                    
                    }
                })
                loadMoreDom.onclick = function () {
                    num = num + 5;
                    ajax_all(num);
                    // wtf.push(dataArr);
                }
            }
          })
        }

}
ajax_all(1)

}
            

css:

html, body, div, h1, h2, h3, h4, h5, h6, p, span, img {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: '微软雅黑';
    font-size: 14px;
}

.container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

.wf-item img{
    width:100%;
}
.wf-item b {
    width: 0.82rem;
    height: 0.54rem;
    position: absolute;
    z-index: 2;
    top: 0.2rem;
    right: 0;
    background: url(/public/static/sj/img/effect/ba.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 0.54rem;
}
.wf-item b i {
    height: 0.23rem;
    font-size: 0.28rem;
    font-family: SourceHanSansCN-Normal;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    font-style: inherit;
}
.wf-item p {
    font-size: 0.26rem;
    font-family: Light;
    font-weight: 400;
    color: #333;
    line-height: 0.4rem;
    text-align: left;
    padding: 0.12rem 0 0rem 0;
}
.load-more {
    text-align: center;
    padding: 10px 0 15px 0;

}
.load-more i{
    width:0.3rem;
    height:0.3rem;
    margin-right:0.1rem;
    display: inline-block;
}

.guide {
    width: 100%;
    position: absolute;
    font-size: 16px;
    color: #f1f1f1;
    bottom: 20px;
    -webkit-animation: fadeInOut ease-in-out 3s infinite;
    -moz-animation: fadeInOut ease-in-out 3s infinite;
    animation: fadeInOut ease-in-out 3s infinite;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
    } 50% {
          opacity: 1;
      } 100% {
            opacity: 0;
        }
}

@-moz-keyframes fadeInOut {
    0% {
        opacity: 0;
    } 50% {
          opacity: 1;
      } 100% {
            opacity: 0;
        }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    } 50% {
          opacity: 1;
      } 100% {
            opacity: 0;
        }
}

.content {
    width: 100%;
    padding-top:0.3rem;
}
.wf-item {
    height: 0;
    margin-bottom: 2%;
    float: left;
    position: relative;
}

.wf-item-1 {
    width: 47%;
    padding-bottom: 47%;
    margin-left: 2%;
}

.wf-item-2 {
    width: 47%;
    margin-left: 2%;
}