jQuery实现瀑布流

最新推荐文章于 2023-01-20 23:30:44 发布
最新推荐文章于 2023-01-20 23:30:44 发布
阅读量264 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29187355/article/details/78835744
版权

这几天做比赛项目的时候要写一个表白墙，用了瀑布流的方式实现，现在来说一下这个瀑布流是怎么实现的。

瀑布流是什么就不再说了，不知道的可以看看这个：点击打开链接

现在说说瀑布流的原理：

将容器设置为相对布局，里面摆放的div为绝对布局。

先计算一行最多容纳几个div 而后将第一行摆满div，将他们的高度存入数组

找出第一行中高度最小的div，第二行中的div距离顶部的距离就是该高度+留白，而后更新数组

重复

这样就基本实现瀑布流了

代码：

html:

<!DOCTYPE html >
< html >
< head >
< title >约课-表白墙 </ title >
< script src= "http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></ script >
< link rel= "stylesheet" href= "http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" >
< link href= "../bin/css/style.css" rel= "stylesheet" type= "text/css" media= "all" />   
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
</ head >
< body style= "background: url(../src/images/bg.jpg);" >
<!--头部-->
< div id= "love-header" >
< div class= "love-banner" >
< a href= "index.html" id= "logo" >约 课 < i class= "glyphicon glyphicon-heart" ></ i ></ a >
< div >
< a href= "#" >我要表白 </ a >
< a href= "#" >约TA学习 </ a >
</ div >
</ div >
</ div >
< div class= "content" >
< ul class= "sort" >
< a href= "index.html" >< li >< img src= "../src/images/首页.png" >首页 </ li ></ a >
< a href= "空教室查询.html" >< li >< img src= "../src/images/会议室预约.png" >空教室查询 </ li ></ a >
< a href= "个人主页.html" >< li >< img src= "../src/images/个人主页.png" >我的主页 </ li ></ a >
< a href= "约自习.html" >< li >< img src= "../src/images/自习室查询.png" >约自习 </ li ></ a >
< a href= "下课聊.html" >< li >< img src= "../src/images/聊天.png" >下课聊 </ li ></ a >
< a href= "表白墙.html" >< li >< img src= "../src/images/爱心.png" >表白墙 </ li ></ a >
</ ul >
<!--表白墙主体-->
< div id= "love-content" >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" >
< img src= "../src/images/加号.png" >更多操作
< div class= "card-more-drop" >
< div class= "card-commit" >我要评论 </ div >
< div class= "card-yue" >约TA上课 </ div >
</ div >
</ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >llohvye </ p >
< p >我做事从来都三分钟热度，却爱了你四年。我以为我习惯了离别就不会哭了，是，我是习惯了离别，却也习惯了你在我身边。我没有为谁哭过，却因为你要走了我哭了很久。对不起，我爱你，却没有告诉你。 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >林豪昀，你知道吗？每当看见你和她那么亲密地走在一起，我的心就会不禁颤抖了一下，心有些酸酸的，这种感觉真不好。为什么你总是要在我狠下心决定放下你的时候，却又来找我，给我希望？为什么？你知不知道，你这样伤害了我，深深地，林豪昀，四年的时间，很长，我不知道我是怎么做到的但我知道，我不介意再等你，等你的目光能转移到我身上，真的，我不介意，等你。反正已经等了你四年，我不介意再等上一个四年。一辈子很长，让我继续爱你可不可以？林豪昀 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >第五个 </ p >
< p >这个瀑布流我服了 谁发明的 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >喵喵 </ p >
< p >我爱的人曹昊，你我分开已经三年之久了，我知道你有了新的生活，而我没有理由去打扰你，三年来，我对你的想念与日俱增，最近看到你和她的婚照，我知道自己终究还是错过了你，我很想很想马上跑到巩义，可是我却不能，三年前，因为我的原因导致我们分开，我没有一天不在后悔。如果我们晚点相遇，会不会站在你身边的人是我呢，我千万次的这样问自己，我真的好想好想你，好想抱抱你亲亲你，回忆一天比一天清晰，我知道自己可能一生都要沦陷在与你的记忆中，离开你之后，我好像得了爱无能呢，我无法再爱上任何人了。认识你，是我此生最幸运的事，我张邵愿意终生等待你，哪怕我知道你不会再回来。我希望当我年迈离去后我的骨灰可以撒在你的家乡，让我来生离你近一点，我爱你，曹昊。 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >喵喵 </ p >
< p >我爱的人曹昊，你我分开已经三年之久了，我知道你有了新的生活，而我没有理由去打扰你，三年来，我对你的想念与日俱增，最近看到你和她的婚照，我知道自己终究还是错过了你，我很想很想马上跑到巩义，可是我却不能，三年前，因为我的原因导致我们分开，我没有一天不在后悔。如果我们晚点相遇，会不会站在你身边的人是我呢，我千万次的这样问自己，我真的好想好想你，好想抱抱你亲亲你，回忆一天比一天清晰，我知道自己可能一生都要沦陷在与你的记忆中，离开你之后，我好像得了爱无能呢，我无法再爱上任何人了。认识你，是我此生最幸运的事，我张邵愿意终生等待你，哪怕我知道你不会再回来。我希望当我年迈离去后我的骨灰可以撒在你的家乡，让我来生离你近一点，我爱你，曹昊。 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >喵喵 </ p >
< p >我爱的人曹昊，你我分开已经三年之久了，我知道你有了新的生活，而我没有理由去打扰你，三年来，我对你的想念与日俱增，最近看到你和她的婚照，我知道自己终究还是错过了你，我很想很想马上跑到巩义，可是我却不能，三年前，因为我的原因导致我们分开，我没有一天不在后悔。如果我们晚点相遇，会不会站在你身边的人是我呢，我千万次的这样问自己，我真的好想好想你，好想抱抱你亲亲你，回忆一天比一天清晰，我知道自己可能一生都要沦陷在与你的记忆中，离开你之后，我好像得了爱无能呢，我无法再爱上任何人了。认识你，是我此生最幸运的事，我张邵愿意终生等待你，哪怕我知道你不会再回来。我希望当我年迈离去后我的骨灰可以撒在你的家乡，让我来生离你近一点，我爱你，曹昊。 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >喵喵 </ p >
< p >我爱的人曹昊，你我分开已经三年之久了，我知道你有了新的生活，而我没有理由去打扰你，三年来，我对你的想念与日俱增，最近看到你和她的婚照，我知道自己终究还是错过了你，我很想很想马上跑到巩义，可是我却不能，三年前，因为我的原因导致我们分开，我没有一天不在后悔。如果我们晚点相遇，会不会站在你身边的人是我呢，我千万次的这样问自己，我真的好想好想你，好想抱抱你亲亲你，回忆一天比一天清晰，我知道自己可能一生都要沦陷在与你的记忆中，离开你之后，我好像得了爱无能呢，我无法再爱上任何人了。认识你，是我此生最幸运的事，我张邵愿意终生等待你，哪怕我知道你不会再回来。我希望当我年迈离去后我的骨灰可以撒在你的家乡，让我来生离你近一点，我爱你，曹昊。 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
< div class= "card" >
< div class= "card-content" >
< p >沐熙 </ p >
< p >yky 我喜欢你 喜欢你的笑的那么开朗 < a href= "#" >更多 </ a ></ p >
< p >发表于 2017-12-02 14:23:30.0 </ p >
</ div >
< hr >
< div class= "card-extra-content" >
< div >< i class= "glyphicon glyphicon-heart" ></ i >0人喜欢 </ div >
< div class= "card-more" > < img src= "../src/images/加号.png" >更多操作 < div class= "card-more-drop" > < div class= "card-commit" >我要评论 </ div > < div class= "card-yue" >约TA上课 </ div > </ div > </ div >
</ div >
</ div >
</ div >
</ div >
< script src= "../bin/js/表白墙.js" > < / script >
</ body >
</ html >
css:

/**
表白墙
*/
#love-header{
height: 60px;
background: #EB717D;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.love-banner{
width: 70%;
display: flex;
justify-content: space-between;
align-items: center;
}
#love-header a{
padding: 3px;
color: #fff;
text-decoration: none;
}
#love-header a::before{
content: "[";
opacity: 0;
}
#love-content{
width: 85%;
margin: 20px auto;
position: relative;
}
.card{
padding: 10px;
border: 1px solid #EB717D;
border-radius: 5px;
float: left;
width: 300px;
margin: 10px;

}

.card p{
margin: 3px;
color: gray;
font-size: 14px;
}
.card p:first-child{
font-size: 18px;
font-weight: bold;
color: black;
}
.card-extra-content{
display: flex;
justify-content: space-between;
}
.card-extra-content img{
height: 16px;
width: 16px;
}
.glyphicon-heart{
cursor: pointer;
}
.glyphicon-heart:hover{
color: red;
}
.card-more{
cursor: pointer;
position: relative;
}
.card-more img{
transition: all 0.5s;
}
.card-more:hover img{
transform: rotate( 180deg);
}

.card-more-drop{
position: absolute;
display: none;
right: 0;
z-index: 10;
}
.card-commit{
height: 30px;
background: black;
color: #fff;
line-height: 30px;
text-align: center;
}
.card-yue{
height: 30px;
color: #fff;
background: green;
line-height: 30px;
text-align: center;
}
js:

$( function(){
/**
* 瀑布流
*/
function cardLoaction(){
var cardWidth= $( ".card"). css( "width");
cardWidth= cardWidth. replace( /px/, "");
var num= Math. floor( $( "#love-content"). width()/ cardWidth);
var cardArr=[];
var $card= $( ".card");
$card. each( function( index, element){
if( index< num){
cardArr[ index]= $card. eq( index). height();
$( element). css({
"left" :( index* $card. outerWidth()+ 20*( index)),
"top" : 0
});
}
else{
var minCardHeight= Math. min. apply( null, cardArr);
var minIndex= cardArr. indexOf( minCardHeight);
$( element). css({
"position" : "absolute",
"top" :minCardHeight+ 40,
"left" :$card. eq( minIndex). position(). left
});
cardArr[ minIndex]+= $( element). height()+ 60;
}
});
}
cardLoaction();
$( window). resize( function(){
cardLoaction();
});




Month7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jQuery完成瀑布流布局
yongxiqianduan的博客
04-07 466
页面的瀑布流布局。使用jQuery框架，用HTML、CSS、JS、AJAX、DOM等共同配合完成。
基于jQuery实现瀑布流页面
10-20
【jQuery实现瀑布流页面】\n\n瀑布流布局是一种常见的网页设计模式，它通常用于图片展示，使得页面在不同尺寸的设备上都能呈现良好的视觉效果。这种布局方式的特点是元素会像瀑布一样逐个流下，每列的高度不固定，...
jQuery瀑布流（一看就懂）
weixin_60659070的博客
10-11 2392
瀑布流可以使用JavaScript实现，今天我把使用jQuery方法实现瀑布流分享出来，供大家参考。 什么是瀑布流？ 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 准备工作： 工具：Visual Studio Code HTMl页面（waterfall.html文件） css文件（waterfall.css文件） js文件（waterfall.js文件） ...
原来写瀑布流这么简单，你来你也行(三种方法实自适应现瀑布流)
七十多岁的人了、
10-24 1057
瀑布流布局实现三种方式，由于程序员节忙着获取勋章，写的些许潦草。
jQuery实现瀑布流布局
solo_1108的博客
07-04 666
瀑布流布局 瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 布局效果 原理 瀑布流布局要求要进行布置的元素等宽 计算浏览器宽度与元素的宽度之比，得到列数 创建数组，存储每列元素总高度 each遍历循环各个图片，判断是否为第一排，若是，则将元素高度直接加入数组中，若不是，则定位布置到高度最小的一列，同时更新当前列的总高度。 jQuery获取元素宽度 在jQuery中，四种宽度 width()方
jquery实现瀑布流
最新发布
qq_35146837的博客
01-20 255
jquery实现瀑布流
基于jQuery实现瀑布流效果
02-04
基于jQuery实现瀑布流效果，主要涉及以下几个核心知识点： 1. **jQuery库**：jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在实现瀑布流时，我们利用jQuery提供的API...
jquery实现瀑布流效果分享
10-26
jQuery Masonry插件是实现瀑布流布局的核心工具。它通过计算每个元素的宽度和位置，使得元素能够垂直堆叠，形成不规则的多列布局。在代码中，我们看到以下设置： ```javascript $container.masonry({ itemSelector...
jquery实现可轮播的瀑布流效果
Amouzy的博客
06-24 462
案例效果： 先实现瀑布流，然后再实现向上无缝轮播。其中瀑布流实现步骤如下： 1、确定图片的宽度 - 滚动条宽度 2、用相对定位来确定第一行按序布局 3、用数组来放各列累加的高度，以相对定位来确定其他行的布局。其中top值就是最小列的高度加上间距。向上无缝轮播主要是利用margin-top的递减来实现向上滚动。当滚动完后再赋值为0重新滚动。...
JQ 用最少代码实现瀑布流布局
06-08
NULL 博文链接：https://onestopweb.iteye.com/blog/2328282
jquery版瀑布流（修改版）
06-26
用jquery实现图片高度不等的瀑布流，并且具有低部footer（也就是设置了瀑布流盒子的高度）。
jq实现瀑布流
01-19
jq实现瀑布流的案例，很详细！，瀑布流,网页，前端
基于jQuery简单可自定义响应式手机电脑端瀑布流
12-29
插件描述：基于jQuery简单可自定义响应式手机电脑端瀑布流. 参考示例：http://www.jq22.com/jquery-info5336
jQuery淡入淡出瀑布流效果
09-01
jQuery淡入淡出瀑布流效果
jQuery特效：实现瀑布流
KaiSarH
03-01 504
jQuery实现瀑布流
三种方式实现瀑布流布局
10-20
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
jquery常见特效之瀑布流
。
06-07 516
第一次写主要是跟着别人的代码写的。参考代码和详细讲解  https://github.com/YeXiaoChao/PluginsFromJS/tree/master/Little%20Demos/waterfall演示效果代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;test&lt;/title&gt; &lt...
jq实现瀑布流布局
qq_41855739的博客
02-16 454
jq实现瀑布流布局 效果图预览
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值