J.chong

通用html代碼

<div id="box">
    <div id="boxBar">0%</div>
    <div id="boxText">0%</div>
</div>

通用方法

    function progressFn(cent) { //cent傳百分比
        var box = document.getElementById('box')
        var box2 = document.getElementById('box2');
        var boxBar = document.getElementById('boxBar')
        var boxText = document.getElementById('boxText')
        var allWidth = parseInt(getStyle(box, 'width')); //500
        boxBar.innerHTML = cent + '%'
        boxText.innerHTML = cent + '%'
        boxBar.style.clip = 'rect(0px,' + (cent / 100) * allWidth + 'px,40px,0px)';//改變第一層的寬度
    }

通用css

    #box{ width: 500px; height: 40px; border: 1px solid #c8c8c8; background: #fff; position: relative; margin-left: auto; margin-right: auto;}
    #boxBar{ position: absolute; left: 0; top: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: #ffffff; text-align: center; font-size: 20px; font-weight: bold; clip: rect(0px,0,40px,0px); background: #00a1f5;}
    #boxText{ position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: #000000; text-align: center; font-size: 20px; font-weight: bold;}

下面是硬編碼方式例子

<div id="box2" style="display: none;">
    <img src="http://b.zol-img.com.cn/desk/bizhi/image/6/1920x1080/1436965788437.jpg" rel="nofollow"/>
    <img src="http://attach.bbs.miui.com/forum/201405/24/093305l2tuzftkogegn1if.jpg" rel="nofollow"/>
    <img src="http://img.ivsky.com/img/bizhi/pic/201506/26/dal_shabet-005.jpg" rel="nofollow"/>
    <img src="http://i1.shouyou.itc.cn/2014/news/2014/09/11/1920x1080bz0912_06.jpg" rel="nofollow"/>
    <img src="http://i2.download.fd.pchome.net/g1/M00/10/18/ooYBAFWyD6WIMSmsAAeRvXnu1PwAACnFwIjKkkAB5HV807.jpg" rel="nofollow"/>
</div>

    //硬編碼方式
    var box = document.getElementById('box')
    var box2 = document.getElementById('box2');
    var img = box2.getElementsByTagName('img');
    var iNow = 0; //當前百分比
    for (var i = 0; i < img.length; i++) {
        (function (i) {
            var yimg = new Image();//圖片預加載對象  //頁面在window.onload之後執行，若生效則不加window.onload
            yimg.onload = function () {
                iNow++;
                progressFn(parseInt(iNow / img.length * 100));
                if (iNow == img.length) {
                    box2.style.display = 'block'
                    box.style.display = '';
                }
            }
            yimg.src = img[i].src;
        })(i)
    }

運行

瀑布流佈局 - 浮動

<div id="box"><ul><li><img src="../img/p-1.jpg" alt=""><p>浮動瀑布流佈局1</p></li><li><img src="../img/p-2.jpg" alt=""><p>浮動瀑布流佈局2</p></li><li><img src="../img/p-3.jpg" alt=""><p>浮動瀑布流佈局3</p></li></ul><ul><li><img src="../img/p-4.jpg" alt=""><p>浮動瀑布流佈局4</p></li><li><img src="../img/p-5.jpg" alt=""><p>浮動瀑布流佈局5</p></li><li><img src="../img/p-6.jpg" alt=""><p>浮動瀑布流佈局6</p></li></ul><ul><li><img src="../img/p-7.jpg" alt=""><p>浮動瀑布流佈局7</p></li><li><img src="../img/p-8.jpg" alt=""><p>浮動瀑布流佈局8</p></li><li><img src="../img/p-9.jpg" alt=""></li></ul></div>

window.onload = function () {
        var ul = document.getElementsByTagName('ul')
        window.onscroll = function () {
            var veiwHeight = document.documentElement.clientHeight; //可視區的距離
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滾動條滾動的距離
            var bBtn = true //判斷是否需要加ajax
            //開始循環： 所有ul，找裏面對應最後一個Li,與屏蔽上面進行比較
            for (var i = 0; i < ul.length; i++) {
                var li = ul[i].getElementsByTagName('li');
                var lastli = li[li.length - 1] //找最後一個即可
                if (posTop(lastli) < veiwHeight + scrollY && bBtn) {  //必須發送請求加載
                    bBtn = false
                    ajax('data.js', function (str) { //xxx.php?page=1&num=10  //ajax(請求的地址，請求成功回調)
                        var json = eval('(' + str + ')')  //返回字符串，解析成js語句，用eval 兩邊加小括號
                        if (json.code) {  //json.code == 0 不發請求
                            bBtn = true; //無請求數據時為false
                        }
                        for (var i = 0; i < json.list.length; i++) { //三組數據添加到頁面，循環json裏的list == 9
                            var list = json.list[i];
                            for (var j = 0; j < list.src.length; j++) {
                                var li = document.createElement('li')
                                li.innerHTML = '<img src="' + list.src[j] + '"/><p>' + list.title[j] + '</p>'
                                ul[i].appendChild(li)
                            }
                        }
                    })
                }
            }
        };
        //觸發滾動條事件，每一個ul裏的li提前到達可視區，則分別添加數據；，先寫方法獲取距離下面的距離 ，offsetTop沒辦法直接獲取屏幕的距離，offsetTop是獲取到有定位的距離；
        function posTop(obj) { //最後一個li頂部距離瀏覽器上邊的距離
            var top = 0;
            while (obj) {
                top += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return top;
        }
    }

運行

瀑布流佈局 - 定位

<div id="box"><ul><li><img src="p-1.jpg" alt=""><p>浮動瀑布流佈局1</p></li><li><img src="p-2.jpg" alt=""><p>浮動瀑布流佈局2</p></li><li><img src="p-3.jpg" alt=""><p>浮動瀑布流佈局3</p></li><li><img src="p-4.jpg" alt=""><p>浮動瀑布流佈局4</p></li><li><img src="p-5.jpg" alt=""><p>浮動瀑布流佈局5</p></li><li><img src="p-6.jpg" alt=""><p>浮動瀑布流佈局6</p></li><li><img src="p-7.jpg" alt=""><p>浮動瀑布流佈局7</p></li><li><img src="p-8.jpg" alt=""><p>浮動瀑布流佈局8</p></li><li><img src="p-9.jpg" alt=""><p>浮動瀑布流佈局9</p></li></ul></div>

    window.onload = function () {
        var li = document.getElementsByTagName('li');
        var aHeight = {L: [], C: [], R: []};//存高度對象
        for (var i = 0; i < li.length; i++) {
            var iNow = i % 3// 0,1,2
            switch (iNow) {
                case 0:
                    li[i].style.left = '5px'
                    aHeight.L.push(li[i].offsetHeight)
                    var step = Math.floor(i / 3) //向下取整 0/3 1/3 2/3
                    if (!step) {  //前三個
                        li[i].style.top = 0;
                    }
                    else {           // 4/3 5/3....下面的每個累加
                        var sum = 0;//累加變量
                        for (var j = 0; j < step; j++) {
                            sum += aHeight.L[j] + 10
                        }
                        li[i].style.top = sum + 'px';
                    }
                    break;
                case 1:
                    li[i].style.left = '200px'
                    aHeight.C.push(li[i].offsetHeight)
                    var step = Math.floor(i / 3) //向下取整 0/3 1/3 2/3
                    if (!step) {  //前三個
                        li[i].style.top = 0;
                    }
                    else {           // 4/3 5/3....下面的每個累加
                        /*
                        * 1，2，3關三個Li top值為0
                        * 後面li top值為前面累加，如 3 4 5   3/3 = 1, 4/3 = 1 , 5/3 =1 向下取整 即前面有一個元素的高度
                        * 6 7 8 Math.floor(i/3) = 2,即有兩個元素高度
                        * */
                        var sum = 0;//累加變量
                        for (var j = 0; j < step; j++) {
                            sum += aHeight.C[j] + 10
                        }
                        li[i].style.top = sum + 'px';
                    }
                    break;
                case 2:
                    li[i].style.left = '400px'
                    aHeight.R.push(li[i].offsetHeight)
                    var step = Math.floor(i / 3) //向下取整 0/3 1/3 2/3
                    if (!step) {  //前三個
                        li[i].style.top = 0;
                    }
                    else {           // 4/3 5/3....下面的每個累加
                        var sum = 0;//累加變量
                        for (var j = 0; j < step; j++) {
                            sum += aHeight.R[j] + 10
                        }
                        li[i].style.top = sum + 'px';
                    }
                    break;
            }
        }
    }

運行

J.chong

基礎進度條

瀑布流佈局

最新文章

最近回复

分类

归档

其它