html
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width:840px;
margin: auto;
background: #cccccc;
padding-left: 10px;
overflow: hidden;
}
.container ul{
width:200px;
margin-right: 10px;
float:left;
}
.container ul li{
list-style: none;
position: relative;
width:100%;
background: white;
margin-top: 10px;
}
.container ul li a{
display: none;
position: absolute;
top:5px;
left:5px;
text-decoration: none;
width:50px;
height:25px;
text-align: center;
line-height: 25px;
background: pink;
color:white;
font-size: 14px;
cursor: pointer;
}
.container ul li:hover a{
display: block;
}
ul li img{
width:200px;
height:300px;
background: url(images/timg.gif) no-repeat center;
}
ul li p{
margin-left:10px;
}
</style>
</head>
<body>
<div id="container" class="container"> <ul> <! --<li>--> <! --<a href="javacript:;"</a>--> <! --<img simagesges1/1.jpg" alt=""> -- > <! Life is not only code but also poetry and distance </p>--> <! --</li>--> </ul> <ul></ul> <ul></ul> <ul></ul> </div> <script src="utils/utils.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Copy the codeCSS (inline)
<style>
*{
margin: 0;
padding: 0;
}
.container{
width:840px;
margin: auto;
background: #cccccc;
padding-left: 10px;
overflow: hidden;
}
.container ul{
width:200px;
margin-right: 10px;
float:left;
}
.container ul li{
list-style: none;
position: relative;
width:100%;
background: white;
margin-top: 10px;
}
.container ul li a{
display: none;
position: absolute;
top:5px;
left:5px;
text-decoration: none;
width:50px;
height:25px;
text-align: center;
line-height: 25px;
background: pink;
color:white;
font-size: 14px;
cursor: pointer;
}
.container ul li:hover a{
display: block;
}
ul li img{
width:200px;
height:300px;
background: url(images/timg.gif) no-repeat center;
}
ul li p{
margin-left:10px;
}
</style>
Copy the codejs
var oUl=document.getElementsByTagName('ul');
console.log(oUl);
oUl=[...oUl];
console.log(oUl);
var data;
var xhr=new XMLHttpRequest();
//console.log(xhr);
xhr.open('GET'.'./data.json'.false);
xhr.onreadystatechange=function() {if(xhr.readyState===4&&xhr.status===200){ data=JSON.parse(xhr.responseText); }}; xhr.send(null); //console.log(data); / / [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}] returns the object of the JSON formatfunction bindHtml() {for(var i=0; i<50; Var num= math.round (math.random ()*7); var num= math.round (math.random ()*7); Var numObj=data[num]; Var oLi=document.createElement('li'); Var img=document.createElement('img');
img.setAttribute('trueImg',numObj.src); img.style.height=numObj.height; oLi.appendChild(img); Var p=document.createElement('p'); p.innerHTML=numObj.title; oLi.appendChild(p); Var a=document.createElement('a');
a.href='javascript:; ';
a.innerHTML='acquisition'; oLi.appendChild(a); // Sort four ul's in array oUl. Sort (function(a,b){
return a.scrollHeight-b.scrollHeight;
});
oUl[0].appendChild(oLi)
}
}
bindHtml();
var imgs=document.getElementsByTagName('img');
function delayImgs() {for(var i=0; i<imgs.length; I ++){// Handle multiple images single(imgs[I]); }}function single(curImg){
if(curImg.load){
return;
}
var winT=utils.win('scrollTop');
var winH=utils.win('clientHeight');
var curImgOffsetT=utils.offset(curImg).top;
var curImgOffsetH=curImg.offsetHeight;
if(winT+winH>=curImgOffsetT+curImgOffsetH){
var trueAdd=curImg.getAttribute('trueImg');
var newImg=document.createElement('img');
newImg.src=trueAdd;
newImg.onload=function(){
curImg.src=trueAdd;
fadeIn(curImg);
curImg.load=true; }}}function fadeIn(img1){
utils.css(img1,'opacity', 0.3); // Set the initial value of transparencysetInterval(function(){
var val=Number(utils.css(img1,'opacity')); //console. Log (val); // Returns a string'0.3'; Val + = 0.3; //console.log(val);if(val>=1){
utils.css(img1,'opacity', 1); clearInterval(timer); } utils.css(img1,'opacity',val);
},300)
}
var container=document.getElementById('container');
window.onscroll=function(){
delayImgs();
var winT=utils.win('scrollTop');
var winH=utils.win('clientHeight');
var allH=container.scrollHeight;
console.log(allH);
if(allH+winH+800>=allH){
bindHtml(); }};Copy the codeAa. Json file
[{"src": "./images/1.jpg"."title":"There's more to life than code poetry and distance."."height": "200px"},
{"src": "./images/2.jpg"."title":"There's more to life than code poetry and distance."."height": "220px"},
{"src": "./images/3.jpg"."title":"There's more to life than code poetry and distance."."height": "250px"},
{"src": "./images/4.jpg"."title":"There's more to life than code poetry and distance."."height": "300px"},
{"src": "./images/5.jpg"."title":"There's more to life than code poetry and distance."."height": "170px"},
{"src": "./images/6.jpg"."title":"There's more to life than code poetry and distance."."height": "280px"},
{"src": "./images/7.jpg"."title":"There's more to life than code poetry and distance."."height": "160px"},
{"src": "./images/8.jpg"."title":"There's more to life than code poetry and distance."."height": "230px"}]Copy the codeFind out for yourself.
Utils.js (encapsulates some methods)
var utils = (function () {
function offset(curEle) {
var l = curEle.offsetLeft;
var t = curEle.offsetTop;
var p = curEle.offsetParent;
while(p.nodeName ! = ="BODY"){
l+=p.offsetLeft +p.clientLeft;
t+=p.offsetTop+p.clientTop;
p = p.offsetParent;
}
return {
left:l,top:t
}
};
function getCss(curEle,attr) {
var val;
if("getComputedStyle" inWindow){// Check whether getComputedStyle is supported; val = getComputedStyle(curEle)[attr]; }else{ val = curEle.currentStyle[attr]; } / / to unit var reg = / ^ (width | height | margin | padding | left | top | | | right bottom fontZise) $/; // Checks whether the current attribute has a unitif(reg.test(attr)){// Check whether it is null;if(!isNaN(parseFloat(val))){
val = parseFloat(val);
}
}
returnval; } / /setCss: Each execution sets an attribute style for the element;function setCss(curEle,attr,val) {
var reg = /^(width|height|top|left|right|bottom|padding|margin)$/;
if(reg.test(attr)){
if(typeof val==="number"){
val = val + "px"; } } curEle.style[attr]=val; // Set inline styles; }function setGroupCss(curEle,obj) {// iterate obj; Call-wrappedsetCss, which sets a single style for an element;for(var key in obj){
setCss(curEle,key,obj[key])
}
}
functioncss(... Arg) {// In the parentheses of the function definition... Is the residual operator; Put all the arguments into an array; //if(arg.length===3){
// [oBox,"height", 300]setCss(... arg); }else if(arg.length===2){
if(toString.call(arg[1])==="[object Object]") {setGroupCss(... arg) }else{
returngetCss(... arg) } } }functionWin (attr,val) {// If it is two arguments, then it must be set; If it is an argument, get;if(val===undefined){
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = val;
document.body[attr] = val;
}
return {
offset:offset,
getCss:getCss,
setCss:setCss,
setGroupCss:setGroupCss, css:css, win:win } })(); /* utils= {offset:function offset(curEle) {
var l = curEle.offsetLeft;
var t = curEle.offsetTop;
var p = curEle.offsetParent;
while(p.nodeName ! = ="BODY"){
l+=p.offsetLeft +p.clientLeft;
t+=p.offsetTop+p.clientTop;
p = p.offsetParent;
}
return {
left:l,top:t
}
}
}*/
Copy the code