原生js--图片的瀑布流

最新推荐文章于 2023-03-21 21:12:41 发布

tracy-迪

最新推荐文章于 2023-03-21 21:12:41 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/Tracy_di/article/details/90113758

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片瀑布流1</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: cornsilk;
        }
        .block{
            position: relative;
            margin:auto;
            width:870px;
            height: auto;
            background-color: white;
        }
        .divlist{
            position: absolute;
            width:100px;
            height:auto;
        }
        .divlist>img{
            width:100%;
            height:auto;
            box-shadow: 0 0 8px black;
        }
    </style>
</head>
<body>
<script src="./js/图片瀑布流1.js"></script>
</body>
</html>

/**
 * Created by Administrator on 2019/5/9.
 */
var block=document.createElement("div");
block.className="block";
document.body.appendChild(block);

var count=8;
var image=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg"];
var startimage=48;
var bgheight=0;
var imager=[];
var pageimage=16;
var pageindex=0;
DivCreat(startimage);
window.onload=function(){
    offset(pageindex);
};
window.onscroll=function(){
    if(window.innerHeight+dealfirefoxscroll()>document.body.clientHeight-50){
        pageindex=startimage;
        startimage+=pageimage;
        DivCreat(pageimage);
        offset(pageindex);
    }
};
function dealfirefoxscroll(){
    return window.pageYOffset||document.documentElement.scrollTop;
}
function DivCreat(number){
    for(i=0;i<number;i++){
        var divlist=document.createElement("div");
        var img=document.createElement("img");
        divlist.className="divlist";
        block.appendChild(divlist);
        divlist.appendChild(img);
        img.src="./img/"+image[Math.floor(Math.random()*image.length)];
        imager.push(divlist);
        }
}
function offset(index) {
    for (i = index; i < imager.length; i++) {
        imager[i].style.left = ((i % count) * (100 + 10)) + "px";
        imager[i].style.top = (i - count) < 0 ? 0 : ((imager[i - count].offsetHeight + imager[i - count].offsetTop) + 10) + "px";
        bgheight=bgheight-(imager[i].offsetHeight+imager[i].offsetTop)>0?bgheight:(imager[i].offsetHeight+imager[i].offsetTop);
        block.style.height=bgheight+"px";
    }
}

tracy-迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js--图片的瀑布流

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>图片瀑布流1</title> <style> *{ margin:0; padding:...
复制链接

扫一扫