jquery Masonry瀑布流插件(转)

By fushanlang, on August 7th, 2012%

如果你经常网上冲浪，这样参差不齐的多栏布局，就象砖块效果砌墙一样，错落有致，是不是很眼熟啊？

这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

Masonry是一款很好用的jquery网页布局插件，它可以去掉不同高度div之间的空白，

让你的网页看上去更加的整齐、漂亮！

官网插件下载地址以及详解地址：

示例demo及文档说明：http://masonry.desandro.com/ （本站离线版下载）

你也可以下载打包的html文档在本地查阅：（内含jquery.masonry.min.js 和 jquery.masonry.js 和 实例） Viewing this project locally Via download

You can download a zip of all the flat HTML files from http://meta.metafizzy.co/files/masonry-site.zip. 本站下载

代码下载地址： https://github.com/desandro/masonry/downloads 本站下载 （里面的demo都有问题，建议还是看上面的官方demo或者本站提供的离线版）

以下是官网的实例截图：

从这2张图片中就能看到此插件的作用了把！

更鲜明的例子，chinaz.com的素材列表页也用了这个jQuery Masonry 插件

chinaz.com截图：

该如何使用呢，其实很简单，看下代码：

test1 test2 test3 test4

//

使用说明：

. . . → Read More: jquery Masonry瀑布流插件(转)

One comment   css, javascript   , ,  

jquery autocomplete改进

By fushanlang, on June 21st, 2011%

最近在使用jquery 的 autocomplete 插件，遇到几个问题，分享一下解决方案。

firefox下的问题

1、支持中文输入： （在IE等非firefox浏览器下可以准确的匹配中文字符，但firefox下却没有任何匹配，该方案里利用firefox的oninput事件来修正hack一下，解决！）
修改199行处：

  }).bind("unautocomplete", function() {
    select.unbind();
    $input.unbind();
    $(input.form).unbind(".autocomplete");
}).bind("input", function() {
   // @hack by liqt:support for inputing  chinese characters  in firefox
   onChange(0, true);
});

Continue reading »jquery autocomplete改进

2 comments   javascript   , ,  

引入Google Ajax API的jquery库

By fushanlang, on January 27th, 2011%

jquery google API  AjaxAPI 库

调用Google API的代码库，可以有效的减少自己站上的流量。比如Jquery，gzip后有19K，调用Google Api，不仅省去了流量，如果大家的网站都这么做的话，由于缓存原因，很多网站用到的话，就不需要重复加载了，非常节省资源，和加载时间。

采用Ajax动态加载google的API中jquery库的代码是这样的：

google.load(“jquery”, “1.3.2”);//加载jQuery 1.3.2

之所以采用www.google.com.tw（这里也可以更换成其他域名如google.de,google.jp之类的）是因为www.google.com有时会不稳定，就会导致加载此代码的页面打不开。实际上如果你只用到jquery的话，根据firebug（火狐下插件）给出的实际地址，也可以直接向下面这样引入jquery库。

希望对需要的朋友有用。:)

3 comments   javascript   , , ,