布局
HTML代码如下：
<div class="container">
<div class="box">
<div class="content">
</div>
</div>
<div class="box">
<div class="content">
</div>
</div>
</div>
CSS代码如下：
*{
padding: 0;
margin: 0px;
}
.box{
position: relative;
float: left;
}
.content{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 5 #ccc;
border-radius: 5px;
}
.content img{
width: 190px;
height: auto;
}
图片位置的排放
思路如下：
- 确定每排能够放的图片个数
- 取得每张图片的高度
- 取得最小的高度
- 确定图片的位置
- 进行排放
学习的点： - var minH = Math.min.apply(null,colH);
apply() 的作用是改变执行的执行环境。
就是说数组 colH 没有min这个方法，但是Math对象可以求最小值，有min这个方法
例如 var a = Math.min(3,2,1,4)，那么a将赋值为1
colH想使用Math对象的min方法，就需要使用call/apply来改变执行环境了。
Math.min(3,2,1,4)等价于 Math.min.apply(null, [3,2,1,4])，null是上下文，传入的对象对应函数中的this，min函数并没有使用this，因此这里可以为null，[3,2,1,4]是给min函数的参数列表。 - $.isArray()函数用于判断指定参数是否是一个数组。
- $.inArray()方法类似于JavaScript的原生.indexOf()方法，没有找到匹配元素时它返回-1。如果数组第一个元素匹配value（参数） ，那么$.inArray()返回0。
- jquery.inarray(value,array)
确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。 - $(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变与document是不一样的 根据英文应该也能理解吧
- Math.floor()//小于等于 x，且与 x 最接近的整数。向下取整
具体的代码如下所示：
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
});
})
function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index]=boxHeight;
}else{
var minboxHeight = Math.min.apply(null,boxArr);
var minboxIndex = $.inArray(minboxHeight,boxArr);
$(value).css({
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).height();
}
});
}
滚动加载
实现思路：
- 判断——当前容器的高度+滚动距离>最后一张图片的高度的一半
var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight = $(document).width();
var scrollHeight = $(window).scrollTop();
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
- 如果上叙为真，则加载数据，这里涉及到JSON的知识
- 这里用到的是json的知识，也就动态的获取数据
var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"1.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
全部代码如下：
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"1.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
window.onscroll = function(){
if(scrollside()){
$.each(dataImg.data,function(index,value){
var box = $("<div>").addClass("box").appendTo($("#container"));
var content = $("<div>").addClass("content").appendTo(box);
console.log("images/"+$(value).attr("src"));
$("<img>").attr("src","images/"+$(value).attr("src")).appendTo(content);
});
imgLocation();
}
};
});
})
function scrollside(){
var box = $(".box");
var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight = $(document).width();
var scrollHeight = $(window).scrollTop();
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}
function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index]=boxHeight;
}else{
var minboxHeight = Math.min.apply(null,boxArr);
var minboxIndex = $.inArray(minboxHeight,boxArr);
$(value).css({
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).height();
}
});
}
还是有bug,最后没办法加载出来，生无可恋の
