热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

瀑布流布局并自动加载实现代码

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
});
});

推荐阅读
author-avatar
岚氵的幽岚1980
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有