bootstrap+masonry.js写瀑布流
最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果。
因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式、内部样式,所以,自己写瀑布流就不行了,所以,根据要求,百度查找相关资料,看到masonry.js.
个人认为这是一个非常好用的瀑布流插件。
下面说一下我在引用的过程中遇到的问题,一开始我用bootstrap栅格系统布局,代码如下
<div class="row masonry">
<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
图文展示
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
<div>
图文展示
</div>
</div>
..........(省略n多图文展示)
</div>
引入masonry.js
<script type="text/JavaScript" src="js/jQuery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js" ></script>
<!--瀑布流-->
<script>
$('.masonry').masonry({
itemSelector: '.item'
});
</script>
本以为会有一个满意的结果,但是,万万没想到,万万没想到,图文展示错乱,重叠..这里我就不上图了,太渣。
后来对照masonry.js的相关文档看了一下,才知道,还要引入imagesLoaded.js。
因为图片没有加载出来时,会影响它的布局,导致瀑布流布局错误。我是这样理解的。如果理解错了,各位使劲吐槽我。
所以,最后再引入imagesLoaded.js
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js" ></script>
最终调整代码为:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js" ></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js" ></script>
<!--瀑布流-->
<script>
<span style="white-space:pre"> </span>$('.masonry').imagesLoaded(function() {
$('.masonry').masonry({
itemSelector: '.item'
});
});
</script>
最后,结果完美。
转载于:https://www.cnblogs.com/ariclee/p/6814241.html
bootstrap+masonry.js写瀑布流相关推荐
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- 原生JS实现瀑布流效果
前两天通过B站在极客学院学习了JS动态瀑布流效果:主要是HTML+CSS控制样式,通过JS实现全局瀑布流样式,以及通过访问自定义的JSON字符串,实现图片无限加载:现对其代码进行整理,供日后学习参考. ...
- 通过JS实现瀑布流效果
JS实现瀑布流效果 效果图 HTML部分以及css样式 <head><meta charset="UTF-8"><meta http-equiv=&q ...
- jaliswall.js图片瀑布流插件
下载地址 jaliswall.js图片瀑布流插件,jQuery响应式瀑布流布插件jaliswall dd:
- 用 jQuery Masonry 插件创建瀑布流式的页面(转)
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
- Android 自定义View 手写瀑布流组件FlowLayout
目录 FlowLayout实现关键步骤: 1.创建一个view继承自ViewGroup 2.重写并实现onMeasure方法 3.重写并实现onLayout方法 纸上得来终觉浅,绝知此事要躬行. 动手 ...
- 纯原生JS的瀑布流插件Macy.js
官网地址: http://macyjs.com/ github地址:https://github.com/bigbitecreative/macy.js
最新文章
- 深度强化学习为什么在实际当中用的比较少 ?
- CURL NDK 交叉编译
- 假设你有一个数组,其中第i 个元素是第i天给定股票的价格。设计算法以找到最大利润。你可以根据需要完成尽可能多的交易(即,多次买入并卖出一股股票)。注意:您不能同时进行多笔交易(即,您必须在再次购买之前
- gcc编译器的整个工作过程
- SQLServer UPDATE INNER JOIN、DELETE INNER JOIN
- SpringCloud微服务(06):Config组件,实现配置统一管理
- 第 20 章 观察者模式
- ActiveMQ-1 安装以及WebUI的配置
- 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)
- java pdf 文字_Java如何使用Java向PDF页面中添加文本
- 【 拼多多发表声明:会认真整改 打假决心没有变】
- Altium Designer之泪点和常规铺铜操作笔记
- 王者荣耀天赐语音包怎么获得?天赐语音包获取方法介绍
- python中open()函数里中文处理
- 为什么选一款适合自己的蓝牙耳机这么难?高性价比低延迟蓝牙耳机推荐
- 恢复参数文件spfile
- 视频教程-人工智能-数学基础视频课程-机器学习
- PHP基础测试题(一)
- Graphx图算法介绍
- 闪电恢复(系统数据快速恢复软件) 软件介绍及软件使用特性
热门文章
- [bzoj1925][Sdoi2010]地精部落
- javascript中的小括号
- Prototype源码浅析——Function.prototype部分(一)
- 诗与远方:无题(六十八)
- 诗与远方:无题(十九)
- Struts2中的全局结果集
- kafka消费者源码解析
- VS Code将vue项目上传到github/gitee过程以及报错调试
- 高德地图的标志放大_点标记-覆盖物-教程-地图 JS API | 高德地图API
- CSS之布局方式(内/外部显示及inline-block显示类型)附<行内块空白间隙解决方案>