首页手记 JQ实现瀑布流学习记录

JQ实现瀑布流学习记录

标签：

JQuery

整个盒子的宽度和高度（包括border+padding），不再是JS中的offsetWidth，而是JQ中的outerWidth(),
绝对定位不再是js中的offsetTop,而是offset().top,注意：top后没有括号；
找某个数组中某个值得下标$.inArray(某值，某数组）；
遍历循环$().each(function(index,value){});和$.each(obj,function(index,value){})
index为下标，value是个DOM对象，是循环的内容，要想在JQ中使用，需要转换成JQ对象来使用$(value)

<!DOCTYPE html>

<html>

<head>

*{margin:0;padding:0;}

#main{position:relative;}

.box{padding:5px;

float:left;}

.boximg{padding:5px;

border:1px solid red;

border-shadow:0 0 5px #cccccc;

border-radius:5px;}

img{width:250px;

height:auto;}

</style>

$(function(){

myplay();

var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},

{"src":"6.jpg"}]};

$(window).on("scroll",function(){

var $lastobox=$(".box").last();

var lastH=$lastobox.offset().top+Math.floor($lastobox.outerHeight()/2); //注意offset().top和outerHeight()

var h=$(window).outerHeight();

var scrollh=$(window).scrollTop();

if(lastH<h+scrollh)

{

$.each(dataInt.data,function(index,value){

var $oBox=$("<div>").addClass("box").appendTo($("#main"));

var $oBoximg=$("<div>").addClass("boximg").appendTo($oBox);

var $oimg=$("<img>").attr("src","img/"+$(value).attr("src")).appendTo($oBoximg);

});

myplay();

}

})

function myplay()

{

//找到main的宽，并让它居中

var $obox=$(".box");

var w=$(window).outerWidth();

var oboxW=$obox.eq(0).outerWidth();

var cols=Math.floor(w/oboxW);

$("#main").width(oboxW*cols).css("margin","0 auto");

//创建储存的高度，第一排后面的图片进行定位

var oboxH=[];

//JQ中遍历，用each

$obox.each(function(index,value)

{

if(index<cols)

{

oboxH.push($obox.eq(index).outerHeight());

}

else

{

var minH=Math.min.apply(null,oboxH);

var minHindex=$.inArray(minH,oboxH); //找某个值在数组中的下标

$obox.eq(index).css({"position":"absolute",

"left":minHindex*oboxW+"px",

"top":minH+"px"});

oboxH[minHindex]+=$obox.eq(index).outerHeight();

}

})

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕仰9764282

手记
篇

粉丝

2

获赞与收藏

2

关注作者，订阅最新文章

相关文章推荐

瀑布流实现学习心得

学习瀑布流记录

在 JQuery Mobile 中实现瀑布流图库布局

RecyclerView 实现瀑布流

CSS3实现瀑布流布局(display: flex/column-count/display: grid)

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

JQ实现瀑布流学习记录

相关文章推荐

阅读免费教程