使用jquery+css实现瀑布流布局
虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下:
思路是通过将每个小块的position设置为relative,然后计算出在当前选择的列下应该上移的距离,然后设置div的top属性为该距离的负值,然后就达到了瀑布流的效果,代码如下:
<!DOCTYPE>
<html>
<head>
<title>vue demo</title>
<script src="js/jquery-3.2.1.js"></script>
<style>
body{
padding:0px;
margin:0px;
} .lv-masonry{
font-size:0px;
} .lv-masonry-2 .lv-masonry-item{
width:calc(50% - 2px - 10px);
} .lv-masonry-3 .lv-masonry-item{
width:calc(33.33% - 2px - 10px);
} .lv-masonry-4 .lv-masonry-item{
width:calc(25% - 2px - 10px);
} .lv-masonry-5 .lv-masonry-item{
width:calc(20% - 2px - 10px);
} .lv-masonry-item{
font-size:20px;
border:1px solid red;
display:inline-block;
margin:5px;
position:relative;
}
</style>
<script>
function Masonry(el){
this.el = el;
this.$el = $(el);
this.size = 0;
} Masonry.prototype = {
constructor:Masonry,
init: function(){
this.size = this.$el.find('.lv-masonry-item').length;
var heights = [{}];
for(var i=1; i<=this.size; i++){
var e = {};
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
e.height = $e.height();
e.top = $e.offset().top;
heights.push(e);
}
var index = this.$el.attr("class").indexOf("lv-masonry-");
if(index > -1){
var clazz = this.$el.attr("class").substr(index);
index = clazz.indexOf(" ");
if(index > -1){
clazz = clazz.substr(0, index);
}
clazz = clazz.substr(clazz.lastIndexOf("-") + 1);
var start = parseInt(clazz);
if(!isNaN(start)){
var minpos = 1;
var mintop = heights[1].top;
for(var i=2; i<=start; i++){
if(mintop > heights[i].top){
minpos = i;
mintop = heights[i].top;
}
}
for(var i=1; i<=start; i++){
if(minpos != i){
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
$e.css("top", -1 * (heights[i].top - mintop) + "px");
}
}
heights = [{}];
for(var i=1; i<=this.size; i++){
var e = {};
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
e.height = $e.height();
e.top = $e.offset().top;
heights.push(e);
}
for(var i=start+1; i<=this.size; i++){
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
var delta = 0;
var temp = i;
do{
delta += heights[temp-start].height + 10;
temp -= start;
}while(temp > start);
delta = heights[i].top - heights[temp].top - delta;
$e.css("top", -1 * delta + "px");
};
}
}
}
} $(function(){
var masonry = new Masonry('#masonry');
masonry.init();
});
</script>
</head>
<body>
<div class="lv-masonry lv-masonry-4" id="masonry">
<div class="lv-masonry-item" style="height:50px;">
1
</div>
<div class="lv-masonry-item" style="height:100px;">
2
</div>
<div class="lv-masonry-item" style="height:150px;">
3
</div>
<div class="lv-masonry-item" style="height:150px;">
4
</div>
<div class="lv-masonry-item" style="height:50px;">
5
</div>
<div class="lv-masonry-item" style="height:100px;">
6
</div>
<div class="lv-masonry-item" style="height:100px;">
7
</div>
<div class="lv-masonry-item" style="height:50px;">
8
</div>
<div class="lv-masonry-item" style="height:50px;">
9
</div>
<div class="lv-masonry-item" style="height:50px;">
10
</div>
</div>
</body>
</html>
masonry.html
代码中仅实现了两列、三列、四列和五列的布局,如果要增加其他的就添加类似如下的css代码即可:
在使用的时候要指定列,示例如下:
然后在jquery的loag方法中添加
var masonry = new Masonry('#masonry');
masonry.init();
便可使用瀑布流布局。
使用jquery+css实现瀑布流布局的更多相关文章
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- Ajax+json+jquery实现无限瀑布流布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- 【CSS】瀑布流布局的两种方式:传统多列浮动和绝对定位布局
传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...
- 纯CSS实现瀑布流布局
https://www.w3cplus.com/css/pure-css-create-masonry-layout.html
- AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
随机推荐
- coursera-斯坦福-机器学习-吴恩达-笔记week2
1 多元线性回归 1.1 假设函数 多元线性回归是指有多个特征特征变量的情况.此时我们修改假设函数hθ(x)=θ0+θ1∗x为hθ(x)=θ0+θ1x1+θ2x2+⋯+θnxn.设x0=1,x为特征向 ...
- 网络编程-day1
一. *** C/S架构:客户端(client)/服务端(server)架构, B/S架构:浏览器(browser) / 服务端(server)架构 软件cs架构:浏览器,qq,微信,陌陌等等 硬件c ...
- 查看apk文件包名的一些方法
1,如果有源码 直接将apk包修改为zip,并解压找到AndroidManifest.xml文件,在文件中搜索“package”找到相应的包名 2,使用adb命令 前提是已经下载android SDK ...
- flask 自动切换环境
简介: 我就是个半吊子程序员.在单位写点程序,在家也写点程序. 单位是企业网,不能上互联网,家里也没办法连上企业网,没有VPN. 主武器是我的笔记本电脑.在单位有一台淘汰的linux服务器,家里有个N ...
- 使用json改写网站
效果图 json文件 https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json { "Ti ...
- 《JavaScript Dom 编程艺术》读书笔记-第7章
动态创建标记~内容包括: 1. 传统技术:document.write 和innerHTML 2. 深入剖析DOM方法:createElemen.createTextNode.appendChild和 ...
- 2017年3月30日15:00:19 fq以后的以后 动态代理
代理与继承,组合不同的是,继承是继承父类特性,组合是拼装组合类的特性,代理是使用代理类的指定方法并可以做自定义. 静态类是应用单个类,当代理的类数量较多时可用动态代理,动态代理在概念上很好理解 htt ...
- SQLserver触发器实现A表insert到B表
CREATE TABLE tab1(tab1_id varchar(11));CREATE TABLE tab2(tab2_id varchar(11)); 现在我们有两张表,要实现在A表里面inse ...
- [转]C++11常用特性的使用经验总结
转载出处 http://www.cnblogs.com/feng-sc C++11已经出来很久了,网上也早有很多优秀的C++11新特性的总结文章,在编写本博客之前,博主在工作和学习中学到的关于C++1 ...
- python 实现快速排序和插入排序
def quick_sort(data): if len(data)<2 or (len(data)==2 and data[0]<=data[1]): #[2,3]此情况会死循环 所以加 ...