js进阶--获取图片样式及瀑布流案例09

最新推荐文章于 2022-03-19 13:06:06 发布

cuishoulong3424

最新推荐文章于 2022-03-19 13:06:06 发布

阅读量244

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cuishoulong3424/article/details/111083650

版权

元素的计算样式

ele.style`获取或设置`元素的`行内样式`

获取的值都是字符串类型的
还有就是样式的名字必须是驼峰命名法

getComputedStyle:当前元素计算后的样式(看权重，获取到的是最终作用在元素身上的样式)

只能获取,不能设置
它是window身上的一个方法
用法:getComputedStyle(ele,“伪类”);返回值是一个对象，对象里是所有计算后元素身上的样式
getComputedStyle(box).width获取box的width,也是字符串
在IE6~IE8是不能用的
还有就是样式的名字必须是驼峰命名法
复合样式获取到的是复合属性

在ie下有专门的属性来获取元素的计算后样式ele.currentStyle

ele.currentStyle,它是一个属性，里面存储的是当前元素所有的计算过后的样式
用法box.currentStyle.width获取box里面的width
ie专属的，谷歌不识别

封装一个设置或者获取css样式的方法

    //封装设置或者获取css样式的一些方法 
    //查找值 
    function getCss(ele, attr) {
        var value = null;
        if ("getComputedStyle" in window) {
            value = getComputedStyle(ele)[attr];
        } else {
            value = ele.currentStyle[attr];
        }
        //为了方便运算我们将几个常用的改成数字，因为本来的是字符串，我们把它的单位也去掉
        var reg = /^(width|height|padding|magrin|opacity|left|top|left)$/;
        if (reg.test(attr)) {
            value = parseFloat(value);
        }
        console.log(value);
        return value;
    }

    //赋值
    function setCss(ele, attr, value) {
        /* 
        1.先确定当前的样式需不需要单位
        2.再确定当前样式,用户给有没有加单位
        */
        //    console.log(ele,attr,value)
        var reg = /^(width|height|padding|magrin|left|top|left)$/;
        if (reg.test(attr)) {
            var number = parseFloat(value); //提取数字
            ele.style[attr] = number + "px";
        }
        ele.style[attr] = value;
    }
    //多个值赋值
    function setGroupCss(ele, obj) {
        for (var key in obj) {
            if (!obj.hasOwnProperty(key)) {
                return
            }
            setCss(ele, key, obj[key])
        }
    }
    //根据值判断意图
    function css() {
        let [ele, attr, value] = arguments;
        if (arguments.length == 2) {
            if (typeof attr == "object") {
                setGroupCss(ele, attr);
            } else {
                getCss(ele, attr);
            }
        } else if (arguments.length == 3) {
            setCss(ele, attr, value);
        } else {
            return;
        }
    }
    css(box, "width");
    css(box, {
        "width": 100,
        "height": 300,
        "background": "red"
    })

for in循环可以便利可枚举的属性

当前对象的私有属性和对象原型上的自己添加的属性都是可枚举的属性

    var obj={
        a:1,
        b:2
    }
    Object.prototype.c=3;
    for(var key in obj){
        console.log(key);//a b c
    }

瀑布流案例+图片懒加载

json的名字data.txt

[
  {"src": "./img/1.jpg","title":"人生不止有代码 诗和远方","height": "200px"},
  {"src": "./img/2.jpg","title":"人生不止有代码 诗和远方","height": "220px"},
  {"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "250px"},
  {"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "300px"},
  {"src": "./img/5.jpg","title":"人生不止有代码 诗和远方","height": "170px"},
  {"src": "./img/6.jpg","title":"人生不止有代码 诗和远方","height": "280px"},
  {"src": "./img/7.jpg","title":"人生不止有代码 诗和远方","height": "160px"},
  {"src": "./img/8.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
  {"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
  {"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "230px"}
]

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 1000px;
            height: 200px;
            /* background:red; */
            margin:0 auto;
            display:flex;
            align-items: flex-start;
        }
        ul{
            list-style: none;
            margin:0 0.5%;
            /* background:black; */
        }
        div li{
            width: 200px;
            margin-bottom: 10px;
        }
        div li img{
            width: 100%;
            display: block;
            background:url(img/timg.gif) no-repeat center center;
        }

    </style>
</head>
<body>
    <div>
        <ul>
        </ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
</body>
</html>
<script src="utils.js"></script>
<script src="瀑布流.js"></script>

js部分

let uls = document.getElementsByTagName('ul');
getData();
function getData() {
    let data;
    let xhr = new XMLHttpRequest;
    xhr.open("get", "data.txt", false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
            data = JSON.parse(xhr.responseText)
            bindHTML(data);
        }

    }
    xhr.send();
}
function bindHTML(data) {
    for (var i = 0; i < 20; i++) {
        uls = Array.from(uls);
        let index = Math.round(Math.random() * 9);
        let curImg = data[index];
        let li = document.createElement("li");
        let img = document.createElement("img");
        let p = document.createElement("p");
        p.innerText = curImg.title;
        img.setAttribute("true-src", curImg.src);
        img.style.height = curImg.height;
        img.className = "bg";
        li.appendChild(img);
        li.appendChild(p);
        uls.sort(function (a, b) {
            return a.scrollHeight - b.scrollHeight;
        })
        uls[0].appendChild(li);
    }
}
//循环执行appearImg
let imgs = document.getElementsByClassName("bg");
function delay() {
    for (var i = 0; i < imgs.length; i++) {
        appearImg(imgs[i]);
    }
}
delay();
//图片懒加载
function appearImg(img) {
    let winT = utils.win("scrollTop");
    let winH = utils.win("clientHeight");
    let imgT=utils.offset(img).top;
    let imgH=img.offsetHeight;
    if(winT+winH>=imgH+imgT){
        let trueSrc=img.getAttribute("true-src");
        let newImg=new Image;
        newImg.src=trueSrc;
        newImg.onload=function(){
            img.src=trueSrc;
        }
    }
}
//检测是否到达底部
function testbot(){
    let winH=utils.win("clientHeight");
    let winT=utils.win("scrollTop");
    let bodyH=utils.win("scrollHeight");
    if(winH+winT>=bodyH){
        getData();
    }
}
window.onscroll = function () {
    delay();
    testbot();
}

utils.js

let utils = (function () {
    function offset(curEle) {
        let l = curEle.offsetLeft;
        let t = curEle.offsetTop;
        let parent = curEle.offsetParent;

        while (parent !== document.body) {
            l += parent.clientLeft + parent.offsetLeft;
            t += parent.clientTop + parent.offsetTop;
            parent = parent.offsetParent;
        }
        return {
            left: l,
            top: t
        }
    }

    function getCss(curEle, attr) {
        let val = null;
        if ('getComputedStyle' in window) {
            val = getComputedStyle(curEle)[attr];
        } else {
            val = curEle.currentStyle[attr];
        }
        let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize|opacity)$/;
        if (reg.test(attr)) {
            val = parseFloat(val);
        }
        return val;
    }

    function setCss(curEle, attr, value) {

        let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize)$/;
        if (reg.test(attr)) {
            if (typeof value === 'number') {
                value = value + 'px';
            }
        }
        curEle.style[attr] = value;
    }

    function setGroupCss(curEle, obj) {
        // 对象有几个键值对就调用几次setCss方法，
        for (var key in obj) {
            setCss(curEle, key, obj[key])
        }
    }
    function css(){
        let [curEle,attr,value] = arguments;
        // 如果传参的个数是2，那就说明不是获取样式就是批量设置样式
        if(arguments.length === 2){
            // 如果第二个参的数据类型是字符串，那就是获取样式
            if(typeof attr === 'string'){
                // 如果第二个参数是字符串，说明是获取样式
                return getCss(curEle,attr)
            }
            else {
                setGroupCss(curEle,attr)
            }
        }
        // 如果传递的参数是3个，那就是单个设置样式
        else if(arguments.length === 3){
            setCss(curEle,attr,value)
        }

    }
    function win(attr,value){
        if(value === undefined){
          return  document.documentElement[attr] || document.body[attr]
        }
        document.documentElement[attr] = value;
        document.body[attr] = value;
   }
   function toArray(likeAry){
        let ary = [];
        try{
            ary = Array.prototype.slice.call(likeAry);
        }catch(e){
            for (var i = 0; i < likeAry.length; i++) {
               ary.push(likeAry[i])
            }
        }
        return ary
   }
    return {
        offset,
        getCss,
        setCss,
        setGroupCss,
        css,
        win,
        toArray
    }
})()

cuishoulong3424

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶--获取图片样式及瀑布流案例09

元素的计算样式ele.style获取或设置元素的行内样式获取的值都是字符串类型的还有就是样式的名字必须是驼峰命名法getComputedStyle:当前元素计算后的样式(看权重，获取到的是最终作用在元素身上的样式)只能获取,不能设置它是window身上的一个方法用法:getComputedStyle(ele,“伪类”);返回值是一个对象，对象里是所有计算后元素身上的样式getComputedStyle(box).width获取box的width,也是字符串在IE6~IE8是不能
复制链接

扫一扫