Masonry jQuery布局插件使用方法
Masonry是一款很好用的jquery网页布局插件，它可以去掉不同高度div之间的空白，
让你的网页看上去更加的整齐、漂亮！
一下是官网的实例截图：
从这2张图片中就能看到此插件的作用了把！
该如何使用呢，其实很简单，看下代码：
`
test1
test2
test3
test4
//
`
看到了，真的很简单，只要使用jquery语句，调用一下就OK了，
插件的功能还不仅如此，想看到更多的效果，请去作者博客！
附插件下载地址以及详解地址：
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 WEIXING.ME！
相关推荐
2010-12-14
jQuery学习（二）
**jQuery **事件方法 事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。 触发实例： $(“button#demo”).click() 上面的例子将触发 的 button 元素的 click 事件。 绑定实例： $(“button#demo”).click(function(){$(“img”).hide()}) 上面的例子会在点击 的按钮时隐藏所有图像。 | 方法 || 描述 | | ready() || 文档就绪事件（当 HTML 文档就绪可用时） | | blur() || 触发、或将函数绑定到指定元素的 blur 事件 | | change() || 触发、或将函数绑定到指定元素的 change 事件 | | click() || 触发、或将函数绑定到指定元素的 click 事件 | | dblclick() || 触发、或将函数绑定到指定元素的 double click 事件 | | error() || 触发、或将函数绑定到指定元素的 error 事件 | | focus() || 触发、或将函数绑定到指定元素的 focus 事件 | | ...
2010-12-15
jQuery学习（三）实例–jQuery背景跟随移动导航（详解）
本例主要使用了jQuery的animate自定义动画函数 **思路：**一个li元素的移动效果，随着鼠标的移动li的left属性发生变化，其背景也就跟着移动 最终实现所要的效果！！ 代码如下： 简单的背景跟随jQuery导航栏！ .wrap { background:#000; height:100px; width:auto; } .menu { margin:40px auto; width:600px; background:#000; border-top:2px solid #FFF; border-bottom:2px solid #FFF; } .menu ul { background:#FFF; position:relative; z-index:99; } .menu ul li { float:left; margin-left:10px; margin-right:10px; width:60px; height:30px; line-height:30px; position:relative; z-index:99; } .menu ul li a ...
2010-12-26
Masonry jQuery 布局插件 详解
Masonry 是用于网页布局的一个插件，可以将不同高度的div去除空白，是页面更整洁！ 如下图： 看到上面的官网截图了吗，masonry可以将div的空白去掉，美化布局！ 使用方法很简单，只要调用一下所要布局的标签就OK了。 如下代码： test1 test2 test3 test4 $(‘#test’).masonry({ singleMode: true, itemSelector: ‘.box’ }) 明白了，就这么简单，还有更多的效果、参数，请参见官网！ 使用详细解释：http://desandro.com/demo/masonry/docs/ 演示地址：http://desandro.com/demo/masonry/docs/ 下载地址：http://desandro.com/resources/jquery-masonry/ CSS Floats1Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. 2Nullam malesuada...
2011-04-08
10款jquery焦点图（幻灯片）插件
分享10款比较实用的jquery焦点图插件，最喜欢其中的第一款，效果好，方便修改！ 1、 Slides Slides幻灯片插件是一个超酷简单的幻灯片jQuery插件。?该款插件具备循环，自动播放功能，褪色或幻灯片过渡效果，淡入淡出，图像预压效果，并自动生成分页。 2、 Face Detection Face Detection人脸检测jQuery效果是一个了不起的插件，也正是它的名字。 它可以检测在照片中的面孔。 3、 AviaSlider AviaSlider 是一款jQuery并具有独特的幻灯片过渡效果的插件。 4、 Fullscreenr 想让你的网站总是出现在画面上并保持其高宽比背景图片？ 而且它必须是中心，而不是在顶部左上角的图像，让它成为关注 的焦点？ 这个插件能做到。 5、 Slidy Slidy是一款可定制的自动转换jQuery图像插件。 6、 MobilyNotes MobilyNotes是一款轻量级（2KB的）jQuery插件，使用它可以做出类似于Flash的超炫效果，可以显示成一个堆叠格式的图像效果。 7、 jQuery Easy Slides Easy S...
2011-01-06
asp.net jquery Ajax获得后台返回值
今天做了一下asp**.net** 下的** jquery **ajax 获得后台返回值的例子，刚开始使用的是vs2005， 但是不论怎么调试总是有问题，先是出现错误：找不到using System.Web.Script.Services， *然后是显示整个页面的html代码，调试了很长时间都不行，网上查资料，我的vs2005没有ajax扩展资源， 然后下载了一个dll文件，名字叫ajax edition（好像是，记不清了），引用了，但是还是一样的错误，难道是 vs版本的原因？晚上下班回来，自己电脑上用vs2008测试一下，靠，没有问题，正常，这是为什么呢？？ 网上找了很多资料也没说出个所以然来，无语啊…… 下面是我的jquery Ajax获得后台返回值实例代码，给正在学习的你一个参考。不懂得联系我，互相学习！！ 前台? Default.aspx 代码： jquery_ajax获得后台返回值 $(function() { $(“#btnOK”).click(function() { $.ajax({ type: “Post”, url: “Default.aspx...
2011-01-05
prototype.js jQuery冲突解决方法
最近做项目发现prototype.js与jQuery一起使用会出现兼容性问题， 百度搜索一些方法，然后自己总结了一下，解决方法如下 首先将jQuery的$符号重定义， 方法：var jq=jQuery.noConflict(); 以后使用$的时候用jq代替，使其与js中的$没有冲突 然后添加对prototype.js 与jQuery的引用，引用的时候要先引用**prototype.js ** 然后再引用jQuery，这一点很重要，然后就OK了，放心使用吧！ 本文原创，转载请注明出处：http://happysnail.org/index.php/archives/374