html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="container" class="container">
<ul>
<!--<li>-->
<!--<img src="images/1.jpg" alt="">-->
<!--<p>生活不只有代码 还有诗和远方</p>-->
<!--<a href="javascript:;">采集</a>-->
<!--</li>-->
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script src="jquery-1.11.3.js"></script>
<script src="utils/utils.js"></script>
<script src="js/index.js"></script>
</body>
</html>
css文件
html,body,div,ul,li,img,p,a{
margin: 0;
padding: 0;
}
.container{
width: 840px;
margin: 30px auto;
background:
overflow: hidden;
padding-left: 10px;
}
ul{
float: left;
list-style: none;
width: 200px;
margin-right: 10px;
}
ul li{
position: relative;
width: 100%;
background:
margin-top: 10px;
margin-bottom: 10px;
}
ul li img{
display: block;
width: 200px;
height: 300px;
background: url("../images/timg.gif") no-repeat center center;
}
ul li a{
text-decoration: none;
color:
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
background: pink;
position: absolute;
left: 5px;
top: 5px;
display: none;
}
ul li:hover a{
display: block;
}
ul li p{
text-align: center;
}
js
var oUl=$('ul')[0];
//console.log(oUl);//ul元素
var url='./data.json';
var val;
$.ajax({
type:'GET',
url:url,
async:false,
dataType:'json',
success:function(data){
//方法中传入的参数data为后台获取的数据
//console.log(data);//[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
val=data;
}
});
//console.log(val);
function bindHtml(){
for(var i=0;i<50;i++){
var str=``;
//8张图片
var num=Math.round(Math.random()*7);
var numObj=val[num];//JSON格式对象里面的每一项
str=`
<li>
<img src="" alt="" trueImg="${numObj.src}" style="height: ${numObj.height}">
<p>${numObj.title}</p>
<a href="javascript:;">采集</a>
</li>
`;
// $('img').attr({style:'height:${numObj.height}'});
var ulAry=$('ul').toArray();
//console.log(ulAry);//数组
ulAry=ulAry.sort(function(a,b){
return a.scrollHeight-b.scrollHeight;
});
//console.log($(str).get(0));
ulAry[0].appendChild($(str)[0]);
}
}
bindHtml();
// var imgs=$('img');
// console.log(imgs);
var imgs=document.getElementsByTagName('img');
function delayImgs(){
for (var i=0;i<imgs.length;i++){
single(imgs[i])
}
}
function single(curImg){
if($(curImg).data('load')){
console.log($(curImg).data('load'));
return;
}
//console.log(curImg);//每一张图片
//console.log($(curImg));//jQuery的实例,可以调用jQuery上的公有方法,jQuery.fn.init [img, context: img]
var curImgOffsetH=$(curImg).outerHeight();
console.log(curImgOffsetH);//当前的图片的高度,随机高度
var curImgOffsetT=$(curImg).offset().top;//获取到的是当前图片获取的上偏移量(是上偏移量不是当前图片的卷去高度)
//console.log($(curImg).offset());//获返回的结果是个对象{top: 40, left: 28.5},获取到的是当前图片的偏移量,包括上偏移量和左偏移量,
console.log(curImgOffsetT);//当前图片的上偏移量,偏移量是一堆数字
// var winH=utils.win('clientHeight');//原生获取一屏的高度
// console.log(winH);
var winH=$(window).height();//jQ获取一屏的高度
//console.log(winH);//968
var winT=$(window).scrollTop();
//console.log(winT);//window卷去的高度
if(winH+winT>=curImgOffsetH+curImgOffsetT){
var trueAdd=$(curImg).attr('trueImg');
console.log(trueAdd);
var newImg=$('<img/>')[0];//创建一个新的img
console.log(newImg);
newImg.src=trueAdd;
$(newImg).ready(function(){
$(curImg).attr('src',trueAdd);//jQuery给当前图片设置src的私有属性,或者是用原生,curImg.src=trueAdd
fadeIn($(curImg));
//console.log($(curImg))//当前图片的实例
$(curImg).data('flag',true);
})
}
}
delayImgs();
function fadeIn(img){
var val=null;
//console.log($(img));//传进来参数的实例,jQuery.fn.init [img, selector: "", context: img]
$(img).css('opacity',0.3);
var timer=setInterval(()=>{
val=Number($(img).css('opacity'));//返回的是字符串0.3,然后用Number()方法转换为数字0.3
//console.log(val);//0.3
val+=0.1;
//console.log(val);//每次加0.1累加后的值
if(val>=1){
$(img).css('opacity',1);
clearInterval(timer);
return;
}
$(img).css({'opacity':val});
},300);
}
var container=$('#container');
console.log(container);
$(window).scroll(function(){
delayImgs();
var winH=$(window).height();
var winT=$(window).scrollTop();
var containerScrollH=container.height();
if(winH+winT+1000>=containerScrollH){
bindHtml();
}
});
引入jQuery文件jQuery-1.11.3.js
images文件夹(自己搞图片,我用的是8张图片)
data.json文件
[
{"src": "./images/1.jpg","title":"人生不止有代码 诗和远方","height": "200px"},
{"src": "./images/2.jpg","title":"人生不止有代码 诗和远方","height": "220px"},
{"src": "./images/3.jpg","title":"人生不止有代码 诗和远方","height": "250px"},
{"src": "./images/4.jpg","title":"人生不止有代码 诗和远方","height": "300px"},
{"src": "./images/5.jpg","title":"人生不止有代码 诗和远方","height": "170px"},
{"src": "./images/6.jpg","title":"人生不止有代码 诗和远方","height": "280px"},
{"src": "./images/7.jpg","title":"人生不止有代码 诗和远方","height": "160px"},
{"src": "./images/8.jpg","title":"人生不止有代码 诗和远方","height": "230px"}
]
