网友
|
前段时间领导给我看了一个网站:http://pinterest.com/, Pinterest 这个名字还算容易理解:「Pin」就是用图钉往墙上钉东西,「interest」就是趣味。 通过 Pinterest ,你可以: 1) 发现有趣的图片――设计、摄影、产品、新闻――并刺激灵感; 2) 将有趣的图片归类――tag、board、category、source――并分享给好友。 一打开Pinterest你会被那些漂亮的图片和网站的杂志风格所吸引。非常强的视觉冲击。 当然今天不是讨论产品的东西,Pinterest的布局非常有意思,按照列排,宽度自适应。正好知道jquery有个叫Masonry的插件,这个插件非常合适做Pinterest类似的布局,而且非常简单。我做了一个简单的类似Pinterest布局的demo,html和css是Pinterest的。 查看demo:http://www.css88.com/demo/jquery-masonery/; jQuery Masonry插件的参数也很简单: $('#wrapper').masonry({ singleMode: false, // 禁用测量每个浮动元素的宽度。 // 如果浮动元素具有相同的宽度,设置为true。 // 默认: false
columnWidth: 240, // 1列网格的宽度,单位为像素(px)。 // 默认: 第一个浮动元素外宽度。
itemSelector: '.box:visible', // 附加选择器,用来指定哪些元素包裹的元素会重新排列。
resizeable: true, // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认:true
animate: true, // 布局重排动画。 // 默认:false
animationOptions: {}, // 一对动画选项,具体参数可以参考jquery .animate()中的options选项,见:http://www.css88.com/jqapi/#p=animate
appendedContent: $('.new_content'), // 附加选择器元素,用来尾部追加内容。 // 在集成infinitescroll插件的情况下使用。
saveOptions: true, // 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项 // 默认:true
}, function() {} // 可选择的回调函数 // 'this'将指向重排的Masonry适用元素 ); 更多关于masonry的demo参见http://desandro.com/resources/jquery-masonry/
2011/10/26 10:48:22
|