JS通过ajax + 多列布局 + 自动加载实现瀑布流效果

Ajax

•说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次

css部分用的是html5+css3的新属性,图片会自动添加到每行的最顶端上去,而不是用js去判断。去除了一些js计算的麻烦。

css部分:

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #352323 url(images/a.png);
    }
    img {
      display: block;
    }
    section {
      max-width: 95%;
      margin: 0 auto;
      overflow: hidden;
      column-count: 5;
      column-gap: 0;
      column-fill: auto;
    }
    figure {
      border: 2px solid pink;
      margin: 0 5px 10px;
      break-inside: avoid;
      padding: 5px;
    }
    figure img {
      width: 100%;
    }
    figcaption {
      padding: 10px 0;
      text-align: center;
      font-weight: 900;
      color: #a77869;
    }

html部分:

通过js插入节点,因为后台不知道多少张图片

 <section>
    <!-- <figure>
      <img src="images/1.jpg" alt="">
      <figcaption>往后余生,风雪是你</figcaption>
    </figure> -->
</section>

js有两个部分,一个是我封装的ajax函数,和一些判断函数

第一部分

window.onload = function() {
    var section = document.getElementsByTagName('section')[0];
    //运行ajax函数;
    ajax('get', 'active.php', 'num=10', function(data) {
      //解析json对象
      let img_data = JSON.parse(data);
      console.log(img_data);
      //循环建多少图片配多少标签
      for (let i = 0; i < img_data.length; i++) {
        //建立figure标签
        let figure = document.createElement('figure');
        //创建两个子元素img和figcaption,并赋值
        let img = document.createElement('img');
        img.src = img_data[i];
        let figcaption = document.createElement('figcaption');
        figcaption.innerHTML = '往后余生,风雪是你';
        //插节点
        figure.appendChild(img);
        figure.appendChild(figcaption);
        section.appendChild(figure);
      }
    });
    document.onscroll = function() {
      var scrollTop = document.documentElement.scrollTop; //距离网页高度
      console.log(scrollTop);
      // var ks = document.documentElement.clientHeight; //可是化窗口高度
      var ks = window.innerHeight || document.documentElement.clientHeight; //可是化窗口高度/兼容方法
      var ht = document.documentElement.offsetHeight; //html总高度
      // console.log(ht);
      if (scrollTop + 1 >= ht - ks) { //鼠标滚动的距离大于html总高度-窗口的距离(也就是html在可视窗口之下的总高度)时 触发函数;
        //执行函数
        ajax('get', 'active.php', 'num=10', function(data) {
          //解析json对象
          let img_data = JSON.parse(data);
          console.log(img_data);
          //循环建多少图片配多少标签
          for (let i = 0; i < img_data.length; i++) {
            //建立figure标签
            let figure = document.createElement('figure');
            //创建两个子元素img和figcaption,并赋值
            let img = document.createElement('img');
            img.src = img_data[i];
            let figcaption = document.createElement('figcaption');
            figcaption.innerHTML = '往后余生,风雪是你';
            //插节点
            figure.appendChild(img);
            figure.appendChild(figcaption);
            section.appendChild(figure);
          }
        });
      }
    }
  };

第二部分:

/**
 * ajax封装
 * @param {string} mehod请求数据方法
 * @param {string} url 请求地址
 * @param {string} data 请求参数
 * @param {[functiong]} success [请求成功之后执行的函数0]
 * @return {[none]} none
 */
function ajax(mehod, url, data, success) {
  var xhr = null;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.xmlhttp")
  }
  //如果有参数get方法需要拼接字符串url+?+data
  if (mehod === 'get' && data) {
    url += '?' + data;
  }
  //open方法
  xhr.open(mehod, url, true);
  //send方法
  if (mehod === 'get') {
    xhr.send();
  } else {
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr(data);
  }
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      success && success(xhr.responseText);
    }
  }

php后台数据

因为主要功能偏向前端,所以后端就通过本地文件载入的

<?php
header("Content-type:text/html;charset=utf-8");
$num = $_GET['num']; // api调用者传递的需要的图片页数
$img = file("img.txt");
// var_dump($img);
$array_url = array();
for($i=0;$i<$num;$i++){
  $url = array_rand($img);
  array_push($array_url,$img[$url]);
}
$a = json_encode($array_url);
echo $a;

总结

以上所述是小编给大家介绍的JS通过ajax + 多列布局 + 自动加载来实现瀑布流效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • 解析javascript瀑布流原理实现图片滚动加载

    先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像美丽说.淘宝网都有使用. 这是我实现的一个效果,就是怎么滚动都加载不玩.就跟瀑布一样流啊流! 这里的实现方式我们只说Js实现方法 实现原理: 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ,得到列数

  • javascript实现仿百度图片的瀑布流加载效果

    由于没有服务器,就用一个json字符串作为下拉时加载图片数据的来源了 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/waterfall.js"></script> <styl

  • 瀑布流布局并自动加载实现代码

    自从Pinterest使用了一种新的方式布局取得成功之后,从此互联网出现了布局潮流,我们把他叫做瀑布流!!在互联网流行起来,从国外到国内普遍存在.国内现有美丽说,蘑菇街,花瓣等代表的网站. 瀑布流是流行一段时间了,现在网上出现了很多的插件.使用起来更是非常的方便.目前用的非常多,并且有是一个juqery的插件masonry,插件地址:http://masonry.desandro.com/ 先使用css把一个网页按照从上到下的方式布局好. 使用起来更是非常方便: 我先引用好jquery文件和ma

  • javascript实现瀑布流动态加载图片原理

    本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现瀑布流效果-动态加载图片</title> <link rel="stylesheet" href="

  • 利用JS实现简单的瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 原理是: 1.设定一行中的列数: 2.取第一行中每一个div的高度并把每一个高度放进一个数组中: 3.算出数组中最小高度的index值: 4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值: 5.以此类推实现多栏布局的瀑布流效果: 6.如果最后一

  • js图片加载效果实例代码(延迟加载+瀑布流加载)

    主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间) 另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果 一 延迟加载 主要思路: HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background 每成功加载一张图片,进度条

  • JavaScript实现图片自动加载的瀑布流效果

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

  • javascript实现瀑布流加载图片原理

    讲一下大概的原理吧,还是先上图:  功能描述: 根据不同菜单的属性值分别加载不同的数据 下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html: 鼠标移到菜单,切换各个图片列表: 鼠标移到图片列表上,显示详细信息:  技术实现方案: 先梳理一下从加载到显示的流程: 1. 加载数据 2. 拼接HTML写入到页面 3. 检查刚刚写入的HTML中的img是否全部加载完成,如果是,进入5.否则进入4 4. 等待图片加载完成 5. 计算每个元素的位置 一开始的时候最头疼的是如何定位的问题,后来

  • javascript瀑布流式图片懒加载实例

    最近项目使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: /** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight

  • 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实现动态加载数据瀑布流的具体代码,供大家参考,具体内容如下 实现的功能 1.每次下拉到底部会自动加载下一页的数据2.图片逐渐显示 首先html <!DOCTYPE html> <html lang="zh-CN">     <head>         <meta charset="UTF-8" />         <meta name="viewport" cont

  • js实现滑动到页面底部自动加载更多功能

    话不多说,请看代码: //滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 // console.log("top:"+scrollTop+"

  • springboot+idea热启动设置方法(自动加载)

    springboot+idea热启动 1.在pom.xml中引入jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> 然后在build/plugins/plugin中设置

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

    本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • idea自动加载html、js而无需重启进程的操作

    遇到一些单体架构的项目时,由于前后端没有分离导致每一次动手前端都需要重启进程运行项目,非常费时费力,因此只需要在idea中配置几项就能解决这个问题: 1.快捷键Ctrl + Alt + S打开设置面板,build-compiler---勾选 Build project automatically选项(2016版本的idea有可能是:make project automatically) 2.快捷键Ctrl + Shift + A查找registry命令: 在查找到的registry命令通过鼠标双

  • dropload.js插件下拉刷新和上拉加载使用详解

    本文实例为大家分享了dropload.js下拉刷新和上拉加载的具体代码,供大家参考,具体内容如下 第一步,下载dropload插件,dropload插件下载地址 官方文档:https://github.com/ximan/dropload 第二步,将下载好的dropload插件中的dropload.css,dropload.min.js文件引入到页面中,注意还要引入 Jquery1.7 以上 或者 Zepto 二选一,不要同时都引用,因为dropload是基于jquery实现的 第三步,将以下代

  • jQuery实现的自动加载页面功能示例

    本文实例讲述了jQuery实现的自动加载页面功能.分享给大家供大家参考,具体如下: demo.html: <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"

随机推荐