使用jquery+css实现瀑布流布局
虽然可以直接使用css实现瀑布流布局，但显示的方式有点问题，所以这儿就直接使用jquery+css来实现瀑布流布局，最终效果如下：
思路是通过将每个小块的position设置为relative，然后计算出在当前选择的列下应该上移的距离，然后设置div的top属性为该距离的负值，然后就达到了瀑布流的效果，代码如下：
1 <!DOCTYPE>
2 <html>
3 <head>
4 <title>vue demo</title>
5 <script src="js/jquery-3.2.1.js"></script>
6 <style>
7 body{ 8 padding:0px;
9 margin:0px;
10 }
11
12 .lv-masonry{ 13 font-size:0px;
14 }
15
16 .lv-masonry-2 .lv-masonry-item{ 17 width:calc(50% - 2px - 10px);
18 }
19
20 .lv-masonry-3 .lv-masonry-item{ 21 width:calc(33.33% - 2px - 10px);
22 }
23
24 .lv-masonry-4 .lv-masonry-item{ 25 width:calc(25% - 2px - 10px);
26 }
27
28 .lv-masonry-5 .lv-masonry-item{ 29 width:calc(20% - 2px - 10px);
30 }
31
32 .lv-masonry-item{ 33 font-size:20px;
34 border:1px solid red;
35 display:inline-block;
36 margin:5px;
37 position:relative;
38 }
39 </style>
40 <script>
41 function Masonry(el){
42 this.el = el;
43 this.$el = $(el);
44 this.size = 0;
45 }
46
47 Masonry.prototype = {
48 constructor:Masonry,
49 init: function(){
50 this.size = this.$el.find('.lv-masonry-item').length;
51 var heights = [{}];
52 for(var i=1; i<=this.size; i++){
53 var e = {};
54 var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
55 e.height = $e.height();
56 e.top = $e.offset().top;
57 heights.push(e);
58 }
59 var index = this.$el.attr("class").indexOf("lv-masonry-");
60 if(index > -1){
61 var clazz = this.$el.attr("class").substr(index);
62 index = clazz.indexOf(" ");
63 if(index > -1){
64 clazz = clazz.substr(0, index);
65 }
66 clazz = clazz.substr(clazz.lastIndexOf("-") + 1);
67 var start = parseInt(clazz);
68 if(!isNaN(start)){
69 var minpos = 1;
70 var mintop = heights[1].top;
71 for(var i=2; i<=start; i++){
72 if(mintop > heights[i].top){
73 minpos = i;
74 mintop = heights[i].top;
75 }
76 }
77 for(var i=1; i<=start; i++){
78 if(minpos != i){
79 var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
80 $e.css("top", -1 * (heights[i].top - mintop) + "px");
81 }
82 }
83 heights = [{}];
84 for(var i=1; i<=this.size; i++){
85 var e = {};
86 var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
87 e.height = $e.height();
88 e.top = $e.offset().top;
89 heights.push(e);
90 }
91 for(var i=start+1; i<=this.size; i++){
92 var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
93 var delta = 0;
94 var temp = i;
95 do{
96 delta += heights[temp-start].height + 10;
97 temp -= start;
98 }while(temp > start);
99 delta = heights[i].top - heights[temp].top - delta;
100 $e.css("top", -1 * delta + "px");
101 };
102 }
103 }
104 }
105 }
106
107 $(function(){
108 var masonry = new Masonry('#masonry');
109 masonry.init();
110 });
111 </script>
112 </head>
113 <body>
114 <div class="lv-masonry lv-masonry-4" id="masonry">
115 <div class="lv-masonry-item" style="height:50px;">
116 1
117 </div>
118 <div class="lv-masonry-item" style="height:100px;">
119 2
120 </div>
121 <div class="lv-masonry-item" style="height:150px;">
122 3
123 </div>
124 <div class="lv-masonry-item" style="height:150px;">
125 4
126 </div>
127 <div class="lv-masonry-item" style="height:50px;">
128 5
129 </div>
130 <div class="lv-masonry-item" style="height:100px;">
131 6
132 </div>
133 <div class="lv-masonry-item" style="height:100px;">
134 7
135 </div>
136 <div class="lv-masonry-item" style="height:50px;">
137 8
138 </div>
139 <div class="lv-masonry-item" style="height:50px;">
140 9
141 </div>
142 <div class="lv-masonry-item" style="height:50px;">
143 10
144 </div>
145 </div>
146 </body>
147 </html>masonry.html
代码中仅实现了两列、三列、四列和五列的布局，如果要增加其他的就添加类似如下的css代码即可：
在使用的时候要指定列，示例如下：
然后在jquery的loag方法中添加
var masonry = new Masonry('#masonry');
masonry.init();
便可使用瀑布流布局。
转载于:https://www.cnblogs.com/lvniao/p/9123040.html
使用jquery+css实现瀑布流布局相关推荐
- css实现瀑布流布局
css实现瀑布流布局,如今只需要一个容器将所有的图片给包起来 首先将这个容器设置网格布局 .container{display:grid;grid-template-columns:repeat(4, ...
- CSS总结——瀑布流布局
瀑布流布局 瀑布流布局是一种新型的布局方式,可以将大小不一的图片完整的显示在页面上,并且在杂乱的布局中保持着一定的美感,今天学习了一下如何使用瀑布流布局,总结了有以下三种方式.(瀑布流还可以使用gri ...
- jQuery实现动态瀑布流布局效果
0x01 前言 今天在tumblr上看到其瀑布流布局,如下图,觉得很有意思便研究了下,发现tumblr使用position:absolute布局的. 照我之前的想法呢,是根据窗口大小,建立N条Col, ...
- html瀑布流布局原理,css 实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside ...
- 瀑布流布局(原生js,jQuery实现)
项目地址: 瀑布流布局实战 阅读人群: 懂html,css,js,jquery的coder 阅读时间: 60minutes 1. 瀑布流式布局简介 什么是瀑布流布局 一种网站页面布局,视觉表现为参差不 ...
- html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析
一.什么是瀑布流布局 瀑布流布局在当下前端网页设计中越来越流行,主要表现形式为上下高度参差不齐的多行布局,往往图片各异大小不等却能够自动适应排成一排按行进行展示,滚动条下拉还不会不断地自动适应加载数据 ...
- html布局结构瀑布流,三种方式实现瀑布流布局
分别使用javascript,jquery,css实现瀑布流布局: 第一种方式:使用JavaScript: 瀑布流布局 *{padding:0;margin:0;} .clearfix:after, ...
- 浅析瀑布流布局原理及实现方式
一.瀑布流 瀑布流布局有一个专业的英文名称Masonry Layouts.瀑布流布局已经有好多年的历史了,我最早知道这个名词的时候大约是在2012年,当时Pinterest网站的布局就是使用的这种流式 ...
- html 瀑布流样式,纯css如何实现瀑布流？css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...
最新文章
- 架构设计：分布式服务，库表拆分模式详解
- 《JAVA与模式》之观察者模式
- windows cmd命令行findstr 类似linux中的grep
- sql语法：inner join on, left join on, right join on具体用法
- 记录MySql错误消息
- css中margin属性的探究
- php对blob视频加密,blob 视频加密
- HSQLDB：一款基于 Java 的嵌入式关系型数据库
- EMS快递单打印模板
- οnchange相当于前端js函数，可以实现前端实时更新以及修改验证
- 佳能计算机使用方法,佳能扫描仪怎么用？佳能扫描仪使用方法
- Detail-revealing Deep Video Super-resolution 论文笔记
- java jframe 设置背景图片_Java怎么给JFrame添加背景图片
- 3.2.2 方法的重写 3.2.3 super关键字
- python工具方法 10 h5py批量写入文件、读取文件，支持任意维度的数据
- 美国大学生数学建模竞赛赛题题型分类
- 高德地图的基础使用（二）定位蓝点
- 压力传感器十大技术趋势解析
- docker CE on Linux示例浅析（四）swam群集配置
- 手机 html 全屏,手机投屏开启满屏模式