`
edwin492
  • 浏览: 114610 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

masonry插件使用

阅读更多

 

    最近写个pinterest网站,其中一个重要的地方就是瀑布布局的应用,找了个jquery插件<a href="http://masonry.desandro.com/">masonry</a>,后来发现美丽说网站也是用的这个。下面例子带滚动条异步加载。

引用:

 

<link rel="stylesheet" href="/statics/css/masonry-site.css" type="text/css" media="screen" />

<script type="text/javascript" src="/statics/js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="/statics/js/masonry-site/jquery.masonry.js"></script>

<script type="text/javascript" src="/statics/js/masonry-site/jquery.infinitescroll.min.js"></script>

<!-- 解决ie不支持html5的nav标签 -->

<!--[if lt IE 9]><script src="/statics/js/html5.js"></script><![endif]-->

 

文件下载<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js">html5.js</a>

HTML:

 

<div>

<section id="content">

<div id="container" class="transitions-enabled infinite-scroll clearfix">

</div>

<!-- 地址中需要有2 分页-->

<nav id="page-nav"> <a href="/collections/loadContent/2/"></a> </nav>

</section>

</div>

 

JS:

<blockquote>

var $j = jQuery.noConflict();

 

$j(function(){

var $container = $j('#container');

$j.ajaxSetup({async: false});//设置为同步

$container.load('/collections/loadContent/1/'); //通过ajax加载页面数据到container节点下   

    $container.imagesLoaded(function(){

      $container.masonry({

        itemSelector: '.box',

        columnWidth: 103,

        isFitWidth: true

      });

    });

 

    $container.infinitescroll({

      navSelector  : '#page-nav',    // selector for the paged navigation 

      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)

      itemSelector : '.box',     // selector for all items you'll retrieve

      loading: {

          finishedMsg: '已全部加载',

          img: '/statics/img/icon/6RMhx.gif'

        }

      },

      // trigger Masonry as a callback

      function( newElements ) {

        // hide new items while they are loading

        var $newElems = $j( newElements ).css({ opacity: 0 });

        // ensure that images load before adding to masonry layout

        $newElems.imagesLoaded(function(){

          // show elems now they're ready

          $newElems.animate({ opacity: 1 });

          columnWidth: 103,

          $container.masonry( 'appended', $newElems, true ); 

        });

      }

    );

});

 

AJAX加载的数据页面

 

<div class="box photo col2">

      <a href="javascript:viewBmark();" title="Stanley by Dave DeSandro, on Flickr" ><img src="/statics/img/test/a1.jpg" alt="Stanley"/></a>

      <div class="shortmsg">某某叉叉网站值得去瞅瞅,某某叉叉网站值得去瞅瞅。</div>

      <div class="blockoper"><span style="color: #999;">收藏0&nbsp;&nbsp;分享0&nbsp;&nbsp;喜欢0</span>&nbsp;&nbsp;<a href="" style='float:right;'>去瞅瞅</a></div>

      <div class="pover-init block-button">

      <div class="sharp color5" style="padding-right: 10px;padding-left: 7px;">

       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

       <div class="content">  

          喜欢♥

       </div>

       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>

   </div> 

   <div class="sharp color5" style="padding-right: 10px;">

       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

       <div class="content">  

          收藏

       </div>

       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>

   </div>

    <div class="sharp color5">

       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

       <div class="content">  

          分享

       </div>

       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>

   </div>        

      </div>

    </div>

 

内容只要写在<div class="box photo col2">标签下面即可,上面的配置选项中columnWidth: 103文档上用于设置每列的宽度,但我死活设置效果不对,后面在样式表中col2可以换成其它的样式

.col1 { width: 80px; }

.col2 { width: 180px; }

.col3 { width: 280px; }

.col4 { width: 380px; }

.col5 { width: 480px; }

 

.col1 img { max-width: 80px; }

.col2 img { max-width: 180px; }

.col3 img { max-width: 280px; }

.col4 img { max-width: 380px; }

.col5 img { max-width: 480px; }

现在还只做个简单的样子,后期再增加分页方面的处理。

资料:http://kayosite.com/jquery-ajax-turn-page-and-cascade-layout.html

http://blog-website.rhcloud.com/blog/?p=90

效果图:

分享到:
评论

相关推荐

    masonry插件

    1. **引入依赖**:首先需要在项目中引入jQuery库和Masonry插件的JavaScript文件,如果是使用CDN,可以直接引用官方提供的链接。 2. **选择元素**:通过jQuery选择器选取需要应用Masonry布局的元素,例如`$("#...

    基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能

    在使用jQuery Masonry时,首先需要在页面中引入jQuery库和Masonry插件的脚本文件。然后,通过JavaScript代码初始化Masonry,指定容器元素以及元素的排列方式。 在本案例中,我们使用了Aspx页面作为后端数据源。Aspx...

    bootstrap图片瀑布布局 Masonry插件

    在本文中,我们将深入探讨如何使用Bootstrap和Masonry插件来实现这种布局。 首先,Bootstrap是Twitter推出的一个开源的前端框架,它包含了一系列响应式布局、移动设备优先的Web组件,如网格系统、下拉菜单、导航、...

    Masonry布局插件.rar

    Masonry插件兼容jQuery和Vanilla JavaScript,这意味着无论你偏好哪种JavaScript库,都可以方便地集成到项目中。 在实际应用中,Masonry布局通常与 Infinite Scroll(无限滚动)或 Lazy Loading(延迟加载)技术...

    jquery网站瀑布流插件masonry.zip

    在使用jQuery Masonry插件时,开发者通常会引入jQuery库和Masonry插件的JavaScript文件,然后通过编写JavaScript代码来初始化和配置插件。以下是一个简单的使用示例: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery ...

    jquery Masonry插件–瀑流式布局

    瀑布流布局,也被称为Masonry布局,是一种在网页...要使用jQuery Masonry插件,首先需要在项目中引入jQuery库和Masonry插件的JavaScript文件。一般情况下,我们可以在HTML文档的`&lt;head&gt;`标签内添加如下引用: ```html ...

    jQuery Masonry瀑布流插件使用方法详解

    以下是对jQuery Masonry插件使用方法的详细说明: 1. **引入库文件**: 在使用jQuery Masonry之前,你需要先引入jQuery库和Masonry插件的脚本文件。在HTML文档的`&lt;head&gt;`部分或者`&lt;body&gt;`底部,通过`&lt;script&gt;`标签...

    jquery Masonry插件方砖布局图片与内容无限滚动加载

    **jQuery Masonry插件详解:实现方砖布局与无限滚动加载** jQuery Masonry是一款非常流行的JavaScript库,专门用于创建自适应、美观的“方砖”布局。这种布局方式能够将内容(如图片或各种大小不一的元素)以网格的...

    masonry 瀑布流插件

    在使用jQuery Masonry时,首先需要引入jQuery库和masonry插件的JS文件。在HTML文档的`&lt;head&gt;`部分,添加如下引用: ```html &lt;script src="https://code.jquery.com/jquery-3.x.min.js"&gt;&lt;/script&gt; ...

    masonry.pkgd.min.js 自适应瀑布流插件

    使用 Masonry 插件,首先需要在页面中引入这两个库,然后可以通过 JavaScript 初始化 Masonry 实例,例如: ```html &lt;script src="path/to/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt; &lt;script src="path/to/masonry.pkgd....

    jQuery瀑布流插件masonry实现的瀑布流布局网页

    在本项目中,jQuery Masonry插件被用来实现这一效果。 jQuery Masonry插件是由David DeSandro开发的,它允许开发者轻松创建动态的、响应式的瀑布流布局。这个插件的工作原理是通过计算每个元素的宽度和当前列的高度...

    jQuery无限加载瀑布流插件masonry.zip

    在实际应用中,使用jQuery Masonry插件通常涉及以下几个步骤: 1. **引入依赖**:首先需要在页面中引入jQuery库和Masonry插件的JavaScript文件。 2. **选择元素**:选择需要应用瀑布流效果的DOM元素,如`...

    【jquery插件】瀑流布局Masonry 插件

    瀑流布局现在在很多大大小小的网站中都可以看到,可是你发现如果你想用是一件相当麻烦的事,今天有了Masonry 插件,给大家带来一个很大的惊喜,简单使用,轻量级应用。 类似的布局,似乎一夜之间出现在国内外大大...

    jQuery网页瀑布流插件masonry.zip

    Masonry插件是基于jQuery构建的,因此,首先你需要在你的项目中引入jQuery库。这可以通过将jQuery的CDN链接添加到HTML文档的部分来实现,或者直接下载jQuery库并将其放在本地服务器上。一旦jQuery被正确引入,你就...

    jQuery masonry和infinitescroll制作带分页的瀑布流插件

    **jQuery Masonry与Infinitescroll结合使用** 将Masonry与Infinitescroll结合,可以构建出一个既美观又实用的瀑布流加载系统。当用户滚动页面时,新的内容块会以错落有致的方式填充到页面中,而不需要用户手动翻页。...

Global site tag (gtag.js) - Google Analytics