JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<div id="text">
    <h1>简单制作思路</h1>
    <p>1.获取浏览器宽度添加ul 每个ul里默认添加5个li</p>
    <p>2.图片数据http://cued.xunlei.com/demos/publ/img/P_001.jpg-P_162.jpg</p>
    <p>3.当ul高小于页面的高加载数据</p>
</div>
<div id="warp"></div>

CSS

*{ margin:0; padding:0;}
    body{ font:13px '微软雅黑', arial, \5b8b\4f53, sans-serif;background: #efefef;line-height: 1.5;overflow-x:hidden;}
    #text{background: green;color: #fff;padding-bottom: 10px;}

    #warp{ margin:10px auto 0; overflow:hidden; }
    #warp ul{float: left; width: 212px; overflow: hidden;font-size: 0;height: auto;margin: 0 5px;}
    #warp ul li{border: 1px solid #ccc;background: #fff;width: 210px;margin-bottom: 10px;line-height: 1;}
    #warp ul li img{ display: block;margin: 10px auto;}
    #warp ul li p{ text-align: center;font-size: 12px;margin-bottom: 10px;}

JavaScript

var Warp = {
    rootImage: "http://cued.xunlei.com/demos/publ/img/",    //图片路径
    imgLen : 162,
    imgIndex : 1,
    uls : [],
    pageWidth : document.documentElement.scrollWidth || document.body.scrollWidth, //页面宽度
    init : function(id,ulWidth){    //id,ul的宽度
        this.div = document.getElementById(id);
        this.ulWidth = ulWidth;
        this.creatUL();
        this.onscroll();
    },
    creatUL :function(){
        var i,ul,li,n,
            ulLen = Math.floor(this.pageWidth / this.ulWidth);
        this.div.style.width = this.pageWidth + "px";
        this.div.style.paddingLeft = (this.pageWidth - ulLen*this.ulWidth)/2 - 8 +"px";
        for(i=0; i<ulLen; i++){
            ul = document.createElement("ul");
            for(n=0; n<5; n++){
                li = this.creatLI();
                ul.appendChild(li);
            }
            this.uls.push(ul);
            this.div.appendChild(ul);
        }
    },
    creatLI : function(){
        var i = this.imgIndex,
            li = document.createElement("li");
        if(i<10){
            i = "00"+i;
        }else if(i<100){
            i = "0"+i;
        }else if(i==this.imgLen){    //等于上限从1循环
            this.imgIndex = 0;
        }
        li.innerHTML = "<img src='http://cued.xunlei.com/demos/publ/img/P_"+ i +".jpg' /><p>"+i+".jpg</p>";
        this.imgIndex ++;
        return li;
    },
    onscroll : function(){
        var that = this,
            height,pageHeight,getScrollTop,
            bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;   //获取页面可视区域宽度
        window.onscroll = function(){
            setTimeout(function(){
                for(var i = 0, len=that.uls.length; i<len; i++){
                    height = that.getPosition(that.uls[i]).height;
                    getScrollTop = document.documentElement.scrollTop || document.body.scrollTop;   // 获取页面卷去的高度
                    if(height < (getScrollTop+bodyHeight)){ //获取页面总高度（总高度 = 卷去高度 + 可视区域高度）
...