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


Posted in Javascript onMay 30, 2019

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 + 多列布局 + 自动加载实现瀑布流效果

总结

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

Javascript 相关文章推荐
浅谈javascript 面向对象编程
Oct 28 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
js常用代码段整理
Nov 30 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
全面分析JavaScript 继承
May 30 #Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 #Javascript
vue组件三大核心概念图文详解
May 30 #Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 #Javascript
基于iview的router常用控制方式
May 30 #Javascript
深入了解js原型模式
May 30 #Javascript
js逆向解密之网络爬虫
May 30 #Javascript
You might like
用函数读出数据表内容放入二维数组
2006/10/09 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python实现电子词典
2020/04/23 Python
python基于ID3思想的决策树
2018/01/03 Python
python实现数据库跨服务器迁移
2018/04/12 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
企业军训感想
2014/02/07 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python