三种方式实现瀑布流布局

网络编程 2024/9/24 佚名

3 1 2

分别使用javascript，jquery，css实现瀑布流布局：

第一种方式：使用JavaScript：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style>
*{padding:0;margin:0;}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="main clearfix" id="main">
<div class="box">
<div class="pic"><img src="/UploadFiles/2021-04-02/0.jpg">第二种方式：使用jquery：(html结构跟css同上)


$( window ).on( "load", function(){
 waterfall('main','box');
 //模拟数据json
 var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
 window.onscroll=function(){
 var isPosting = false;
 if(checkscrollside('main','box') && !isPosting){
  isPosting = true;
  $.each(dataJson.data,function(index,dom){
  var $box = $('<div class="box"></div>');
  $box.html('<div class="pic"><img src="/UploadFiles/2021-04-02/'+$(dom).attr('src')+'">第三种方式：使用css：(html结构同上)


.clearfix:after,
.clearfix:before {
 content: " ";
 display: table;
}
.clearfix:after {
 clear: both;
}
.main {
 position: relative;
 [color=#ff0000]-webkit-column-width: 210px;
 -moz-column-width: 210px;
 -webkit-column-gap: 5px;
 -moz-column-gap: 5px;[/color]
}
.box {
 float: left;
 padding: 15px 0 0 15px;
}
.box .pic {
 width: 180px;
 height: auto;
 padding: 10px;
 border-radius: 5px;
 box-shadow: 0 0 5px #cccccc;
 border: 1px solid #cccccc;
}
.box .pic img {
 display: block;
 width: 100%;
}


瀑布流实现方式比较：
Javascript原生方式/jquery方式
1、需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；
2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范
Css方式
1、不需要计算，浏览器自动计算，只需设置列宽，性能高；
2、列宽随着浏览器窗口大小进行改变，用户体验不好；
3、图片排序按照垂直顺序排列，打乱图片显示顺序；
4、图片加载还是依靠javascript/jquery实现
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

瀑布流布局

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“三种方式实现瀑布流布局”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

三种方式实现瀑布流布局

微信小程序模板之分页滑动栏

vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

评论“三种方式实现瀑布流布局”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接