原生Javascript实现照片墙

原生Javascript实现照片墙

最近跟着网易云课堂的JS学习视频的案例篇实现了一个类似这样的界面:

示例
实现思路很简单,大致如下:

1.首先布局html:

    仅一个ul标签,其余元素之后再通过JS添加

    2.通过js循环添加图片与元素:

                    var ul=document.getElementById('ps');
                    for(let i=1;i<=10;i++){
                    var li=document.createElement('li');
                    ul.appendChild(li);
                    var img=document.createElement('img');
                    img.setAttribute('src','img/'+i+'.jpg');
                    li.appendChild(img);
                    }

    这里通过循环写入新的元素,省去了html定义重复元素的麻烦,但是注意图片格式要统一命名,以序号区分

    3.定义CSS样式:

    个人对CSS的理解薄弱,不停地面向百度写CSS
    所以在实现这个CSS界面的时候,感觉到了吃力,但是学习的过程本该如此

    “我本凡尘,然心向天空。”

        

    4.随机将元素分配到屏幕的各个位置并设置CSS属性:

                    var allLis=ul.children;
    
                    var screenW=document.documentElement.clientWidth-250;
                    var screenH=document.documentElement.clientHeight-300;
    
                    for(let i=0;i

    首先通过allLis获取到ul的子标签,也就是我们第二步添加的li标签

        var screenW=document.documentElement.clientWidth-250;
        var screenH=document.documentElement.clientHeight-300;

    通过screenWscreenH获取到屏幕的大小,从而进行接下来的随机分配位置
    这里用到了underscore.js这个库,实际上可以通过内置的Math对象实现相同的操作。

    5.通过JS的onmouseover事件设置鼠标当前所指的元素

    li.onmouseover=function(){
                            for(let j=0;j

    这里是写在循环中的,用于监听点击事件,并将当前所指的CSS属性进行调整。

    大致思路就是上述内容,代码简单而且容易实现,写下这篇博客其实是为了熟悉markdown的使用,不足之处还望海涵。

    暂无评论

    发送评论 编辑评论

    
    				
    |´・ω・)ノ
    ヾ(≧∇≦*)ゝ
    (☆ω☆)
    (╯‵□′)╯︵┴─┴
     ̄﹃ ̄
    (/ω\)
    ∠( ᐛ 」∠)_
    (๑•̀ㅁ•́ฅ)
    →_→
    ୧(๑•̀⌄•́๑)૭
    ٩(ˊᗜˋ*)و
    (ノ°ο°)ノ
    (´இ皿இ`)
    ⌇●﹏●⌇
    (ฅ´ω`ฅ)
    (╯°A°)╯︵○○○
    φ( ̄∇ ̄o)
    ヾ(´・ ・`。)ノ"
    ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
    (ó﹏ò。)
    Σ(っ °Д °;)っ
    ( ,,´・ω・)ノ"(´っω・`。)
    ╮(╯▽╰)╭
    o(*////▽////*)q
    >﹏<
    ( ๑´•ω•) "(ㆆᴗㆆ)
    😂
    😀
    😅
    😊
    🙂
    🙃
    😌
    😍
    😘
    😜
    😝
    😏
    😒
    🙄
    😳
    😡
    😔
    😫
    😱
    😭
    💩
    👻
    🙌
    🖕
    👍
    👫
    👬
    👭
    🌚
    🌝
    🙈
    💊
    😶
    🙏
    🍦
    🍉
    😣
    Source: github.com/k4yt3x/flowerhd
    颜文字
    Emoji
    小恐龙
    花!
    下一篇