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

简介:

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,如需转载请自行联系原作者


相关文章
|
6月前
|
缓存 Ubuntu JavaScript
踩坑记录:QML加载图片资源
踩坑记录:QML加载图片资源
738 0
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
6月前
|
测试技术 iOS开发
蓝条下压和消失导致页面错乱问题解决方案
蓝条下压和消失导致页面错乱问题解决方案
45 0
|
6月前
|
小程序 自动驾驶 IDE
静态懒加载+占位组件,让页面打开“快人一步”
静态懒加载+占位组件,让页面打开“快人一步”
73 0
|
6月前
|
前端开发 JavaScript 开发者
vue3页面调接口时加载卡住不响应
vue3页面调接口时加载卡住不响应
1507 0
|
小程序 PHP
【Uniapp小程序】实现上滑加载分页(触底加载)附后端Thinkphp代码
【Uniapp小程序】实现上滑加载分页(触底加载)附后端Thinkphp代码
223 0
|
小程序 JavaScript
整理微信小程序控制view隐藏显示的五种方法
整理微信小程序控制view隐藏显示的五种方法
830 0
|
小程序 JavaScript 前端开发
小程序实现滚动加载(懒加载)
小程序是一项很受欢迎的技术,随着其能力的不断增强,越来越多的人开始使用小程序来完成各种任务。当我面面临一个页面有非常多的数据时,该如何处理呢,显然一次性全部加载完,会非常消耗性能的,为了解决这些问题从而出现了一种叫滚动加载的数据处理方式,也被称为“无限滚动”或“懒加载”,它可以使你的页面在不刷新的情况下连续加载更多数据。在本文中,我们将讨论如何在小程序中实现滚动加载。
281 0
|
小程序 JavaScript 前端开发
小程序封装加载动画
在小程序的开发中,页面的加载过程可能会因为网络状况的不好或数据量的过大而显得非常缓慢,这时候加上一个加载动画就能有效的缓解用户的等待焦虑感。而对于应用的多个页面来说,使用全局加载动画可以提高用户体验,让应用显得更加美观和专业。本篇技术分享博客将为大家介绍在小程序中封装全局加载动画的具体实现步骤,帮助您提高小程序的用户体验。通过上述步骤,我们就完成了小程序中封装全局加载动画的具体实现方法。在实际开发中,我们可以根据实际需求对组件样式和方法进行调整和修改,以满足不同的开发需求。
239 0
|
前端开发 JavaScript Go
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
130 0
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?