自己主动瀑布流布局和实现代码加载

简介:

Pinterest使用一种新的方式布局取得成功之后,们把他叫做瀑布流,国内现有漂亮说,蘑菇街,花瓣等代表的站点接下来为你介绍一个juqery的插件masonry的使用,感兴趣的你能够參考下哈

自从Pinterest使用了一种新的方式布局取得成功之后。从此互联网出现了布局潮流,我们把他叫做瀑布流。!在互联网流行起来,从国外到国内普遍存在。国内现有漂亮说,蘑菇街,花瓣等代表的站点。

 

瀑布流是流行一段时间了。如今网上出现了许多的插件。使用起来更是很的方便。眼下用的许多,而且有是一个juqery的插件masonry。插件地址:http://masonry.desandro.com/ 

先使用css把一个网页依照从上到下的方式布局好。 
使用起来更是很方便: 

我先引用好jquery文件和masonry文件,使用例如以下代码: 
代码例如以下: 
$(function(){ 
var $container = $('#container'); 
$container.imagesLoaded( function(){ 
$container.masonry({ 
itemSelector : '.content_box', 
isFitWidth: true,//// 是否可调整大小 Boolean 
isRTL:false ////使用从右到左的布局 Boolean 
}); 
}); 

版权声明:本文博客原创文章,博客,未经同意,不得转载。





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/4665711.html,如需转载请自行联系原作者


相关文章
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
2月前
|
存储 前端开发 UED
动态样式问题之客户端进行样式复用如何解决
动态样式问题之客户端进行样式复用如何解决
23 0
|
5月前
|
测试技术 iOS开发
蓝条下压和消失导致页面错乱问题解决方案
蓝条下压和消失导致页面错乱问题解决方案
37 0
|
5月前
|
小程序 自动驾驶 IDE
静态懒加载+占位组件,让页面打开“快人一步”
静态懒加载+占位组件,让页面打开“快人一步”
62 0
|
5月前
|
前端开发 JavaScript 开发者
vue3页面调接口时加载卡住不响应
vue3页面调接口时加载卡住不响应
1236 0
|
12月前
|
小程序 PHP
【Uniapp小程序】实现上滑加载分页(触底加载)附后端Thinkphp代码
【Uniapp小程序】实现上滑加载分页(触底加载)附后端Thinkphp代码
195 0
|
前端开发 JavaScript Go
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
125 0
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
|
JSON 小程序 JavaScript
小程序触底加载与下拉刷新功能的设计与实现
在最近做小程序的时候有这么一个很常见的需求,加载一个信息列表,要求需要触底加载和下拉刷新,我突然想起来掘金小册界面和这个需求很相似,接下来我给大家介绍一下我的实现方案。
350 0
小程序触底加载与下拉刷新功能的设计与实现
|
小程序 前端开发 iOS开发
小程序页面左右滑动如何解决
小程序页面左右滑动如何解决
|
前端开发
前端性能优化之企业项目SVG Flex 预加载 窗口加载(6)
前端性能优化之企业项目SVG Flex 预加载 窗口加载(6)
109 0