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 相关文章推荐
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
Axios取消重复请求的方法实例详解
Jun 15 Javascript
全面分析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
关于php fread()使用技巧
2010/01/22 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python多线程实例教程
2014/09/06 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Python读取yaml文件的详细教程
2020/07/21 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
历史学专业推荐信
2013/11/06 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
golang中的struct操作
2021/11/11 Golang
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android