Ajax
- 说明：本文效果是无限加载的，意思就是你一直滚动就会一直加载图片出现，通过鼠标滚动距离来判断的，所以不是说的那种加载一次就停了的那种，那种demo下次我会再做一次
css部分用的是html5+css3的新属性，图片会自动添加到每行的最顶端上去，而不是用js去判断。去除了一些js计算的麻烦。
css部分：
1 * { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 } 6 7 body { 8 background: #352323 url(images/a.png); 9 } 10 11 img { 12 display: block; 13 } 14 15 section { 16 max-width: 95%; 17 margin: 0 auto; 18 overflow: hidden; 19 column-count: 5; 20 column-gap: 0; 21 column-fill: auto; 22 } 23 24 figure { 25 border: 2px solid pink; 26 margin: 0 5px 10px; 27 break-inside: avoid; 28 padding: 5px; 29 } 30 31 figure img { 32 width: 100%; 33 } 34 35 figcaption { 36 padding: 10px 0; 37 text-align: center; 38 font-weight: 900; 39 color: #a77869; 40 }
html部分：
通过js插入节点，因为后台不知道多少张图片
1 <section> 2 <!-- <figure> 3 <img src="images/1.jpg" alt=""> 4 <figcaption>往后余生，风雪是你</figcaption> 5 </figure> --> 6 7</section>
js有两个部分，一个是我封装的ajax函数，和一些判断函数
第一部分
1window.onload = function() { 2 var section = document.getElementsByTagName('section')[0]; 3 //运行ajax函数； 4 5 6 ajax('get', 'active.php', 'num=10', function(data) { 7 //解析json对象 8 let img_data = JSON.parse(data); 9 console.log(img_data); 10 //循环建多少图片配多少标签 11 for (let i = 0; i < img_data.length; i++) { 12 13 //建立figure标签 14 let figure = document.createElement('figure'); 15 16 //创建两个子元素img和figcaption，并赋值 17 let img = document.createElement('img'); 18 img.src = img_data[i]; 19 20 let figcaption = document.createElement('figcaption'); 21 22 figcaption.innerHTML = '往后余生，风雪是你'; 23 //插节点 24 figure.appendChild(img); 25 figure.appendChild(figcaption); 26 section.appendChild(figure); 27 } 28 }); 29 30 31 document.onscroll = function() { 32 var scrollTop = document.documentElement.scrollTop; //距离网页高度 33 console.log(scrollTop); 34 35 // var ks = document.documentElement.clientHeight; //可是化窗口高度 36 var ks = window.innerHeight || document.documentElement.clientHeight; //可是化窗口高度/兼容方法 37 var ht = document.documentElement.offsetHeight; //html总高度 38 // console.log(ht); 39 40 if (scrollTop + 1 >= ht - ks) { //鼠标滚动的距离大于html总高度-窗口的距离(也就是html在可视窗口之下的总高度)时 触发函数; 41 //执行函数 42 ajax('get', 'active.php', 'num=10', function(data) { 43 //解析json对象 44 let img_data = JSON.parse(data); 45 console.log(img_data); 46 //循环建多少图片配多少标签 47 for (let i = 0; i < img_data.length; i++) { 48 49 //建立figure标签 50 let figure = document.createElement('figure'); 51 52 //创建两个子元素img和figcaption，并赋值 53 let img = document.createElement('img'); 54 img.src = img_data[i]; 55 56 let figcaption = document.createElement('figcaption'); 57 58 figcaption.innerHTML = '往后余生，风雪是你'; 59 //插节点 60 figure.appendChild(img); 61 figure.appendChild(figcaption); 62 section.appendChild(figure); 63 } 64 }); 65 } 66 } 67 };
第二部分:
1/** 2 * ajax封装 3 * @param {string} mehod请求数据方法 4 * @param {string} url 请求地址 5 * @param {string} data 请求参数 6 * @param {[functiong]} success [请求成功之后执行的函数0] 7 * @return {[none]} none 8 */ 9function ajax(mehod, url, data, success) { 10 var xhr = null; 11 if (window.XMLHttpRequest) { 12 xhr = new XMLHttpRequest(); 13 } else { 14 xhr = new ActiveXObject("Microsoft.xmlhttp") 15 } 16 17 18 //如果有参数get方法需要拼接字符串url+?+data 19 if (mehod === 'get' && data) { 20 url += '?' + data; 21 } 22 23 24 //open方法 25 xhr.open(mehod, url, true); 26 27 //send方法 28 if (mehod === 'get') { 29 xhr.send(); 30 } else { 31 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); 32 xhr(data); 33 } 34 35 xhr.onreadystatechange = function() { 36 if (xhr.readyState === 4 && xhr.status === 200) { 37 success && success(xhr.responseText); 38 } 39 }
php后台数据
因为主要功能偏向前端，所以后端就通过本地文件载入的
1<?php 2 3header("Content-type:text/html;charset=utf-8"); 4 5 6$num = $_GET['num']; // api调用者传递的需要的图片页数 7 8$img = file("img.txt"); 9 10// var_dump($img); 11 12$array_url = array(); 13 14for($i=0;$i<$num;$i++){ 15 $url = array_rand($img); 16 array_push($array_url,$img[$url]); 17} 18 19$a = json_encode($array_url); 20 21echo $a;
