找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发 AJAX + 瀑布流组件

2018-08-29 23:46:05 分类：教程 阅读(549) 评论(0)

麦子学院 web前端开发视频 面试前端开发有哪些问题 学会前端开发需要多久

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>JAXA + 瀑布流</title>
    <style type=”text/css”>
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        form,
        fieldset,
        input,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 12px;
        }
        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        q:before,
        q:after {
            content: ”;
        }
        object,
        embed {
            vertical-align: top;
        }
        hr,
        legend {
            display: none;
        }
        img,
        abbr,
        acronym,
        fieldset {
            border: 0;
        }
        ul li {
            list-style-type: none;
        }
        a,
        label {
            cursor: pointer;
        }
        img {
            vertical-align: bottom;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            outline: none;
        }
        .clearfix:after {
            content: “.”;
            visibility: hidden;
            display: block;
            height: 0.1px;
            font-size: 0.1em;
            line-height: 0;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        input,
        textarea,
        select {
            outline: none;
            border: 1px solid #bfbfbf;
        }
        th {
            font-weight: 400;
        }
        button {
            cursor: pointer;
            border: none;
            outline: none;
        }
        textarea {
            border: 1px solid #ccc;
            resize: none;
            outline: none;
            overflow: hidden;
            padding: 5px;
        }
        select {
            outline: none;
        }
        .text_overflow {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        html {
            font-family: “Microsoft YaHei”, tahoma, arial, “Hiragino Sans GB”, “\5b8b\4f53”, sans-serif;
            font-size: 14px;
            color: #5c5d5e;
        }
        body {
            height: 500px;
        }
        .water-fall {
            margin: 0 auto;
            padding: 0 20px;
            overflow: hidden;
        }
        .water-fall ul {
            float: left;
            width: 250px;
            margin: 0 10px;
            overflow: hidden;
        }
        .water-fall li {
            margin-bottom: 10px;
            height: 100%;
            padding: 10px;
            opacity: 0;
            text-align: center;
            border: 2px solid #000;
            transition: opacity 5s;
        }
        .water-fall img {
            width: 180px;
            height: 180px;
        }
        .water-fall p {
            margin: 20px 10px 0;
            color: #fff;
            font-size: 18px;
            border: 2px dotted #dedede;
        }
        .water-fall .last-tip {
            float: left;
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #000;
            text-align: center;
            font-size: 18px;
        }
        .prompt-explain {
            margin-bottom: 50px;
            border: 2px dotted blue;
            line-height: 1.5;
            font-size: 16px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class=”prompt-explain”>
        <dl>
            <dt>ajax + 瀑布流组件说明:</dt>
            <dd>
                <p>作用：该组件用于以瀑布流的形式显示数据</p>
                <p>依赖:依赖water-fall.css</p>
                <div>
                    <p>var water = new WaterFall(waterFall //整个瀑布流的容器（必须）, data.img // 数据源（必须）, {</p>
                    <p>ulBoxNum : 4,//设置显示多少列（可选）</p>
                    <p>eachNew : 4,//设置每次加载多少数据（可选，自己设置的话，为了防止极端情况，必须大于等于4）</p>
                    <p>ulBoxMargin : 10,//设置每个ul直接的间距（可选）</p>
                    <p>minHeight : 240,//设置每个li的最小高度（可选）</p>
                    <p>maxHeight : 300,//设置每个li的最大高度（可选）</p>
                    <p>lastTip : ‘数据显示完毕！’//设置数据完全加载后的提示语（可选）</p>
                    });
                </div>
                <p>兼容：IE8+</p>
            </dd>
        </dl>
    </div>
    <div id=”waterFall” class=”water-fall clearfix”></div>
    <script>
        ; (function (win, doc) {
            ‘use strict’;
            function WaterFall(obj, data, options) {
                this.obj = obj;
                this.length = data.length;
                this.indexNum = 0;
                this.isLast = false;
                this.goLast = true;
                this.init(options, data);
            }
            WaterFall.prototype = {
                constructor: WaterFall,
                init: function (options, data) {
                    var defaultOptions = {
                        ulBoxNum: 4,
                        eachNew: 4,
                        ulBoxMargin: 10,
                        minHeight: 240,
                        maxHeight: 300,
                        lastTip: ‘数据显示完毕！’
                    }
                    options = options || {};
                    this.extend(defaultOptions, options);
                    this.createUlBox(options.ulBoxNum);
                    this.createCon(options, data);
                    this.EventBind(options, data);
                    this.obj.style.width = this.obj.querySelector(‘ul’).offsetWidth * options.ulBoxNum + 2 * options.ulBoxNum * options.ulBoxMargin + ‘px’;
                    if (options.ulBoxNum * options.eachNew > this.length) {
                        this.lastShow(options);
                    }
                },
                randomNum: function (x, y) {
                    return Math.floor(Math.random() * (Math.max(x, y) – Math.min(x, y))) + Math.min(x, y);
                },
                // 画ul
                createUlBox: function (num) {
                    var frag = document.createDocumentFragment();
                    for (var i = 0; i < num; i++) {
                        var oList = document.createElement(“ul”);
                        frag.appendChild(oList);
                    }
                    this.obj.appendChild(frag);
                },
                // 画Li
                createLi: function (options, data) {
                    var r = this.randomNum(0, 255),
                        g = this.randomNum(0, 255),
                        b = this.randomNum(0, 255),
                        oLi = doc.createElement(“li”),
                        img = doc.createElement(“img”),
                        p = doc.createElement(‘p’);
                    img.src = data[this.indexNum][‘imgSrc’];
                    p.innerText = data[this.indexNum][‘imgDer’];
                    this.indexNum++;
                    oLi.style.height = this.randomNum(options.minHeight, options.maxHeight) + “px”;
                    oLi.style.backgroundColor = ‘RGB(‘ + r + ‘, ‘ + g + ‘, ‘ + b + ‘)’;
                    oLi.style.opacity = 1;
                    oLi.appendChild(img);
                    oLi.appendChild(p);
                    return oLi;
                },
                // 随机增加节点
                createCon: function (options, data) {
                    var oList = null;
                    for (var j = 0; j < options.eachNew; j++) {
                        for (var i = 0; i < options.ulBoxNum; i++) {
                            if (this.indexNum < this.length) {
                                oList = this.createLi(options, data);
                                this.obj.querySelectorAll(‘ul’)[i].appendChild(oList);
                            } else {
                                this.isLast = true;
                            }
                        }
                    }
                },
                // 事件绑定
                EventBind: function (options, data) {
                    var oThis = this;
                    window.onscroll = function () {
                        if (!oThis.isLast) {
                            var scT = doc.documentElement.scrollTop || doc.body.scrollTop,
                                scH = doc.documentElement.scrollHeight || doc.body.scrollHeight,
                                cH = doc.documentElement.clientHeight || doc.body.clientHeight;
                            if (scT + 20 >= scH – cH) {
                                oThis.createCon(options, data);
                            }
                        } else if (oThis.goLast && oThis.isLast) {
                            oThis.lastShow(options);
                        }
                    }
                },
                // 对象扩展
                extend: function (obj1, obj2) {
                    for (var x in obj1) {
                        if (!obj2[x]) {
                            obj2[x] = obj1[x];
                        }
                    }
                    return obj2;
                },
                // 加载完毕后的函数
                lastShow: function (options) {
                    var oThis = this,
                        oList = doc.createElement(‘div’);
                    oThis.goLast = false;
                    oList.innerText = options.lastTip;
                    oList.className = ‘last-tip’;
                    oThis.obj.appendChild(oList);
                }
            }
            win.WaterFall = WaterFall;
        })(window, document);
    </script>
    <script>
        var waterFall = document.querySelector(‘#waterFall’);
        var data = {
            img: [
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
                    imgDer: ‘这是一张图片1’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
                    imgDer: ‘这是一张图片2’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
                    imgDer: ‘这是一张图片3’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
                    imgDer: ‘这是一张图片4’
                },
                {
                    imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
                    imgDer: ‘这是一张图片5’
                },
            ]
        };
        var water = new WaterFall(waterFall, data.img, {
            ulBoxNum: 4,//设置显示多少列（可选）
            eachNew: 4,//设置每次加载多少数据（可选）
            ulBoxMargin: 10,//设置每个ul直接的间距（可选）
            minHeight: 240,//设置每个li的最小高度（可选）
            maxHeight: 300,//设置每个li的最大高度（可选）
            lastTip: ‘数据显示完毕！’//设置数据完全加载后的提示语（可选）
        });
    </script>
</body>
</html>

网络前端开发需要教材 怎么制作web前端开发 微信小程序可视化前端开发

» 本文来自：前端开发者 » 《前端开发 AJAX + 瀑布流组件》
» 本文链接地址：https://www.rokub.com/5425.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论