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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 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
深入了解php4(1)--回到未来
2006/10/09 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
如何使用angularJs
2017/05/08 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python多进程操作实例
2014/11/21 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
快速入手Python字符编码
2016/08/03 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
万能检讨书2000字
2014/10/17 职场文书
校友回访母校寄语
2015/02/26 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
讨论nginx location 顺序问题
2022/05/30 Servers