【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局

前段时间领导给我看了一个网站:http://pinterest.com/
Pinterest 这个名字还算容易理解:「Pin」就是用图钉往墙上钉东西,「interest」就是趣味。

通过 Pinterest ,你可以:
1) 发现有趣的图片——设计、摄影、产品、新闻——并刺激灵感;
2) 将有趣的图片归类——tag、board、category、source——并分享给好友。

一打开Pinterest你会被那些漂亮的图片和网站的杂志风格所吸引。非常强的视觉冲击。
当然今天不是讨论产品的东西,Pinterest的布局非常有意思,按照列排,宽度自适应。正好知道jquery有个叫Masonry的插件,这个插件非常合适做Pinterest类似的布局,而且非常简单。我做了一个简单的类似Pinterest布局的demo,html和css是Pinterest的。

查看demo:https://www.html.cn/demo/jquery-masonery/

jQuery Masonry插件的参数也很简单:
[code=”javascript”]
$(‘#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选项,见:https://www.html.cn/jqapi/#p=animate

appendedContent: $(‘.new_content’),
// 附加选择器元素,用来尾部追加内容。
// 在集成infinitescroll插件的情况下使用。

saveOptions: true,
// 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
// 默认:true

}, function() {}
// 可选择的回调函数
// ‘this’将指向重排的Masonry适用元素
);
[/code]

 

更多关于masonry的demo参见http://desandro.com/resources/jquery-masonry/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局

评论 21

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    日本有人做才vgrid跟这个效果差不多

    kamal8年前 (2011-03-22)回复
  2. #-48

    itemSelector: ‘.box:visible’,

    这个除了:visible 还有什么呢?我怎么去查阅呢?我刚开始接触这方面知识。

    daisyleaf8年前 (2011-03-23)回复
  3. #-47

    有一个很重要的bug,infinite新增出来的元素,不能用上面筛选分类的代码,能有办法解决吗

    leafiy8年前 (2011-04-12)回复
    • 这个可以的啊,只是我随便乱写了一下!

      8年前 (2011-04-12)回复
      • 试了下,还是不行,当把所有内容都显示出来以后,上面的GAY RED筛选就不好用了

        leafiy8年前 (2011-04-12)回复
  4. #-46

    之前还在思考这种效果是怎么实现的, 当初想用css来做, 而且不想用定位. 之后无果, 似乎绝对定位来做最方便

    ADD~``8年前 (2011-04-28)回复
    • @ADD~“, 你要是用绝对定位能做出来。我就服了。这是动态内容,高度是随机性的!

      付付8年前 (2011-08-17)回复
      • @付付, 高度随机, 但是还是通过js获取高度之后, 用绝对定位来控制位置的啊..

        ADD~``8年前 (2011-08-17)回复
  5. #-45

    类似的插件还是蛮多的,我用了很久了。

    liujin8348年前 (2011-07-29)回复
  6. #-44

    原来是用这个插件做的啊 那个对路网也是的吗?

    早起的菜鸟7年前 (2011-09-16)回复
  7. #-43

    我按masonry 的Infinite Scroll的Demo做了个例子,可是各个版本的IE下不能自动翻页啊,问下Masonry用到的插件infinitescroll.js是否需要php环境的支持啊?

    虎嘟嘟7年前 (2011-10-17)回复
    • @虎嘟嘟, 详细阅读一下infinitescroll.js的文档,你会发现,翻页的时候页面地址上一定得有个“2”!

      7年前 (2011-10-17)回复
      • @, 我就是用的第二页啊
        chrome firefox下可以触发自动翻页,就是ie不起作用啊

        虎嘟嘟7年前 (2011-10-17)回复
        • @虎嘟嘟, 加载不到第二页 一般是 div 标签不对称 ,有开始 没结束….

          kagome7年前 (2011-11-03)回复
    • @虎嘟嘟, 自己弄糊涂了,ie不支持html5 nav标签,看了一天没发现,晕

      周末阅读7年前 (2011-10-17)回复
  8. #-42

    我试了下 如果网速不够快的时候 有些图片是重叠的

    每张图片的高度都不一样的 是否需要获取图片高度设置一下

    看了下你的demo 里面有的图片是有高度的 有的没设 不解

    餅餅7年前 (2011-11-02)回复
  9. #-41

    我直接用pinterest.com 的js和css,我想知道我看了pinterest的js,不会加,,我用的是php,能告诉我方法吗

    wang7年前 (2011-11-10)回复
  10. #-40

    刚才输入了div没显出里面的内容再重新发过:
    我直接用pinterest.com 的js和css,我想知道我看了pinterest的js,动态的style=left,top,这两个参数怎么加上去呀,,我用的是php,

    wang7年前 (2011-11-10)回复
  11. #-39

    站长能告诉我怎么移动滚动条显示内容吗,是不是要把内容先要从数据库读出来呀

    wang7年前 (2011-11-20)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏