JS实现图片瀑布流效果

2024-10-20 09:33:50

本文实例为大家分享了JS实现图片瀑布流的具体代码，供大家参考，具体内容如下

过程：

1、创建一个放所有图片的模块bigblock。
2、获取这个大模块，追加一个子元素块来放小图。
3、封装一个函数list(n)来存放50张图片，并且将每张图追加放入空数组ele[]中。
4、封装一个函数set_position（），来确定每个图片的位置，用到了offsetHeight，offsetTop，offsetWidth等属性，同时给最大块也设置动态的高度，随着加载的图片数量增多，最大块的高度也随着增高。
5、使用 window.onload事件，加载图片更方便。
6、给浏览器的滚动条添加事件，让滚动条滑到body的可视区域最底部以上10px 时，加载出新的30张图片，并且每次滚动条停留在到刚加载的图片位置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>photo瀑布流</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
           /* background: #ebebeb;*/
            background: url(./img/bging2.jpg );
            background-size:100% ;
            height:100%;
        }
        .bigblock {
            position: relative;
            width:650px;
            min-height: 200px;
            background: #fff;
            margin:auto;

        }
        .smallblock{
            position:absolute;
            width:100px;
            border-radius:5px ;
            box-shadow: 0 0 7px #89c8eb;
            box-sizing: border-box;
            overflow: hidden;
        }
        .photo{
            width:100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="bigblock">

</div>
<script>
    var Big=document.getElementsByClassName ("bigblock")[0];
    var ele=[];
    var num=6;
    var bghight=0;
    var start=0;
    var image_img=["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "9.jpg", "10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg"];
    for(var i=0;i<50;i++){
        list();

    }
  function  list(n){
      var small=document.createElement("div");
      var image=document.createElement("img");
      small.className="smallblock";
      image.className="photo";
      image.src="./img/"+image_img[parseInt(Math.random()* image_img.length)]; //0-12
      ele.push(small);
      Big.appendChild(small);
      small.appendChild (image);

  }
   function set_position(){
     for(var i=start;i<ele.length;i++){
       //设置每张图片的位置
       var settop=i <num ? 0: ele[i-num].offsetHeight +10 + ele[i-num].offsetTop ;
       ele[i].style.top=settop+"px";
       var setleft = i %num * ele[i].offsetWidth + (i % num) * 10;
       ele[i].style.left=setleft+"px";
         //获取背景的高度
       bghight =(ele[i].offsetHeight +ele[i].offsetTop)>bghight ? ele[i].offsetHeight +ele[i].offsetTop :bghight ;
       Big.style.height =bghight +"px";
     }
   }

   window.onload=function(){
       set_position();
       //添加浏览器的滚动条事件
       this.addEventListener ("scroll",function(){
          var b_height=document.body.clientHeight;
           if(parseInt (this.pageYOffset+ this.innerHeight ) > b_height-10 ){
              start =ele.length;
              for(i=0;i<30;i++){
                   list();
              }
               set_position ();
           }
          // console.log(b_height);  //body的可视高度，可变
          // console.log(this.pageYOffset);    //滚动条的上偏移量
          // console.log(this.innerHeight);   //浏览器可视区域的高
       })
   }
</script>
</body>
</html>

图片不是动图，看不出什么效果，但代码都是正确的，小伙伴可以试一试。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript瀑布流的实现你学会了吗

目录瀑布流的核心案例注意点 (1)服务器加载网络图片的meta标签 (2)瀑布流执行的判断依据 (3)函数的节流 (4)服务器配置更改运行结果总结瀑布流的核心 1, 根据 ajax请求的响应体结果动态渲染生成页面请求地址请求方式参数键名都是后端程序定义的前端只能根据需求定义携带的具体的参数数据响应体数据是后端程序返回的数据结果只能获取数据结果不能修改数据结果可以根据响应体数据结果动态渲染生成页面内容可以使用三元运算符给标签定义属性等 2, 瀑
js实现瀑布流布局（无限加载）

本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下 1.实现瀑布流布局思路准备好数据之后 . 绑定滚动事件 . 判断页面是否到底(滚动的距离+可是区域的高度 == 最后一个元素的top) . 加载新数据,渲染新页面 .重新执行瀑布流效果 2.代码(更换图片路径之后可直接运行) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Doc
如何用JS实现网页瀑布流布局

前言: 瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 什么是瀑布流布局: 先看效果: 图片多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为了方便理解,在此先给上html.css代码不完整html代码: <div id="container"> <d
js实现瀑布流触底动态加载数据

本文实例为大家分享了js实现瀑布流触底动态加载数据的具体代码,供大家参考,具体内容如下 // onScrollEvent 滚动条事件 <div class="box" ref="box" @mousewheel="onScrollEvent"> //每一个方块内的内容start <div class="boxItemStyle" v-for="(userTag, i) in dataSource&q
JavaScript实现瀑布流布局的3种方式

前言今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式. 一.JS 实现瀑布流思路分析 1.瀑布流布局的特点是等宽不等高. 2.为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推. 3.父元素设置为相对定位,图片所在元素设置为绝对定位.然后通过设置 top 值和 left 值定位每个元素. 代码实现 <!DOCTYPE html> <html
使用js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
JS实现图片瀑布流效果

本文实例为大家分享了JS实现图片瀑布流的具体代码,供大家参考,具体内容如下过程: 1.创建一个放所有图片的模块bigblock. 2.获取这个大模块,追加一个子元素块来放小图. 3.封装一个函数list(n)来存放50张图片,并且将每张图追加放入空数组ele[]中. 4.封装一个函数set_position(),来确定每个图片的位置,用到了offsetHeight,offsetTop,offsetWidth等属性,同时给最大块也设置动态的高度,随着加载的图片数量增多,最大块的高度也随着增高.
jquery代码实现简单的随机图片瀑布流效果

为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery随机图片瀑布流无限加载</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:no
使用JS实现图片展示瀑布流效果(简单实例)

不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
使用JS实现图片展示瀑布流效果的实例代码

不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
JavaScript实现图片自动加载的瀑布流效果

先给大家展示下效果图: 向下滑动网页的时候能够自动加载图片并显示. 盛放图片的盒子模型如下: <div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div> 设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距.盒子的宽度是由img-width和边
JS原生瀑布流效果实现

今天早起看了慕课的瀑布流,的确讲的十分详细,也十分的好,我在博客里也就只能给代码加些注释,和说一下思路.建议大家去看一下慕课的瀑布流教程,非常详细,每一个细节都讲的非常好,只要懂JS的基础代码,看起来应该不是多大问题,里面没有太难得方法,但自己写不出来还是因为思路上有问题,下面就详细说一下几个重点方法的代码,建议大家去慕课详细学习 HTML 和CSS没有太难得地方 <div id="main">//一个main包含了整个页面内容,box用来做一个外容器,img作为图片容器
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果

Ajax •说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次 css部分用的是html5+css3的新属性,图片会自动添加到每行的最顶端上去,而不是用js去判断.去除了一些js计算的麻烦. css部分: * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #352323 url(images/a
JS实现瀑布流效果

本文实例为大家分享了JS实现瀑布流效果的具体代码,供大家参考,具体内容如下话不多说,直接上代码.如下: CSS部分: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px;} .imgbox{ padding: 4px;} .imgbox img{width: 200px;display: block;border-radius: 4px;} </style> HTML部分(
原生js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 CSS样式: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 5px;} .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;} .imgbox img{width: 200px;display: block;} </style>

JS实现图片瀑布流效果

相关推荐

随机推荐