瀑布流布局(jq实现)
参考刘晓帆大神的瀑布流效果 自己也写了个 希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！
html代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="z-box">
<ul>
<li>
<h3>1A</h3>
<a>aa</a>
<a>aa</a>
<a>aa</a>
</li>
<li>
<h3>2B</h3>
<a>bb</a>
</li>
<li>
<h3>3C</h3>
<a>cc</a>
<a>cc</a>
<a>cc</a>
<a>cc</a>
</li>
<li>
<h3>4D</h3>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
</li>
<li>
<h3>5E</h3>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
</li>
<li>
<h3>6F</h3>
<a>ff</a>
<a>ff</a>
<a>ff</a>
</li>
<li>
<h3>7G</h3>
<a>GG</a>
<a>GG</a>
<a>GG</a>
</li>
<li>
<h3>8E</h3>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
</li>
<li>
<h3>9F</h3>
<a>ff</a>
<a>ff</a>
<a>ff</a>
</li>
<li>
<h3>10G</h3>
<a>GG</a>
<a>GG</a>
<a>GG</a>
</li>
</ul>
</div>
</body>
</html>
css代码：
*{
margin:0px;
padding:0px;
font-size:12px;
}
body{
background:pink;
}
li{
list-style:none;
}
.z-box{
width:300px;
height:auto;
box-shadow:0px 0px 1px red;
margin:0 auto;
position:relative;
}
.z-box ul{
}
.z-box ul li{
width:44px;
text-align:center;
position:absolute;
background:#f3f3f3;
top:0px;
left:40%;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.z-box ul li a{
display:block;
width:44px;
}
javascript代码：
$(function(){
var $oLi=$(".z-box > ul li"); //jq对象
var dWidth=$(".z-box").outerWidth();
var lWidth=$oLi.outerWidth()+5; //li的宽度+间距
var col=Math.round(dWidth/(lWidth+10)); //列数+间距
console.log(col);
var array=[]; //存放列坐标的数组
for(var i=0;i<col;i++){
array.push([i*lWidth,0]); //初始化列的坐标
}
$oLi.each(function(){ //遍历每一个单位
var _temp=0; //最低列暂存体
var _height=$(this).outerHeight(); //获取当前单位的高度
for(var j=0;j<col;j++){
if(array[j][1]<array[_temp][1]){
_temp=j; //比较哪列是最低索引
}
}
$(this).css({"left":array[_temp][0]+"px","top":array[_temp][1]+"px"}); //设置单位的坐标
array[_temp][1] = array[_temp][1] + _height+5; //计算列的最低坐标
});
//获取最高top
var nLi=[],
n=0,
max=0,
nHeight;
for(var i=0;i<col;i++){
if(array[i][1]>array[n][1]){
n=i;
max=array[i][1]-5;
}
}
for(var j=0;j<col;j++){
if(array[j][1]>array[n][1]){
n=j;
$(".z-box").css("height",array[j][1]-5+"px");
console.log("min="+j);
}else{
nHeight=max-array[j][1];
nLi[j]=document.createElement("li");
$(nLi[j]).css("height",nHeight);
$(nLi[j]).css({"left":array[j][0]+"px","top":array[j][1]+"px"});
$(".z-box > ul").append(nLi[j]);
console.log("max="+j);
}
}
});
瀑布流布局(jq实现)的更多相关文章
- 纯css瀑布流布局
由于公司的项目需要才用到瀑布流布局 因为后台返回的json直接循环出来的,所以不能做左右浮动的那种,所以才用到了瀑布流布局 16年之前的瀑布流布局基本都时基于js或者直接用jq插件的,但是随着技术的进 ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- flexbox实现不等宽不等高的瀑布流布局
第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...
- 通过Measure & Arrange实现UWP瀑布流布局
简介 在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...
随机推荐
- mysql数据库使用
C#操作Mysql数据库的存储过程,网址 DATEDIFF() 函数返回两个日期之间的天数. 语法 DATEDIFF(date1,date2) date1 和 date2 参数是合法的日期或日期/时间 ...
- WebApi系列~基于RESTful标准的Web Api
微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...
- pwnable.kr-random
题目 首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand产生随机数,下面将详细说明. rand(产生随机数) 表头文件: #include 定义函数 :int ...
- （DFS、全排列）POJ-3187 Backward Digit Sums
题目地址 简要题意: 输入两个数n和m,分别表示给你1--n这些整数,将他们按一定顺序摆成一行,按照杨辉三角的计算方式进行求和,求使他们求到最后时结果等于m的排列中字典序最小的一种. 思路分析: 不难 ...
- Ftrl in tensorflow
reference :点击这里https://github.com/tensorflow/tensorflow/issues/3725 讲解 http://www.tuicool.com/articl ...
- linux命令每日一练习 显示一个文件的制定行－－－查看命令帮助信息
sed -n '11,12p' ××× cat ***|tail -n +12|head -n 2 tail -n +5 显示末尾五行 查看一个命令的帮助 详细的 man *** 简略的 *** -- ...
- Shell脚本8种字符串截取方法总结
Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.aaa.com/123.htm. 1. # 号截取,删除左边字符,保留右边字符. 代码如下: echo ${va ...
- Html标签第一课
<p>段落标签</p> <h1>字体标签,1到6,越来越小</h1>.....<h6></h6><h>标签自动换行 ...
- web开发流程（传智播客-方立勋老师）
1.搭建开发环境 1.1 导入项目所需的开发包 dom4j-1.6.1.jar jaxen-1.1-beta-6.jar commons-beanutils-1.8.0.jar commons-log ...
- pytho简单爬虫_模拟登陆西电流量查询_实现一键查询自己的校园网流量
闲来无事,由于校园内网络是限流量的,查询流量很是频繁,于是萌生了写一个本地脚本进行一键查询自己的剩余流量. 整个部分可以分为三个过程进行: 对登陆时http协议进行分析 利用python进行相关的模拟 ...