jQuery Wookmark瀑布流布局

文章简介：jQuery Wookmark 瀑布流布局.

版本：
jQuery v1.4.4+
Wookmark v0.5
注意事项：

1.项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。（可以用 JavaScript 即时获取图片的宽高，但图片数量过多时，这将是一件不靠谱的事情，如果你执意要这么做，可以参考这个 Demo）

查看Demo：http://code.ciaoca.com/jquery/wookmark/demo/example.html

中文文档：http://code.ciaoca.com/jquery/wookmark/

官方网址：http://www.wookmark.com/jquery-plugin

时间： 2024-09-13 12:44:46

jQuery Wookmark瀑布流布局的相关文章

基于jquery实现瀑布流布局_jquery

本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码,分享给大家供大家参考,具体内容如下效果图: 具体代码: 使用jquery-1.8.3.min.js,waterfall.js代码如下: $( window ).load( function(e){ waterfall(); var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]}; $(

Jquery实现瀑布流布局（备有详细注释）_jquery

本文实例讲述了Jquery实现瀑布流布局的方法.分享给大家供大家参考.具体如下: 瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练). <!doctype html> <html> <head> <meta charset="utf-8"> <title

jQuery实现瀑布流布局详解（PC和移动端）_jquery

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我们用百度图片作为范例: 这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局: 可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里.而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似. 动手首先我们将如

jQuery+HTML5瀑布流布局例子

这是一款JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击"加载瀑布流布局"按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感. 代码如下: <!DOCTYPE HTML> <html> <head> <title>美女瀑布流</title> <style type=&

jQuery实现瀑布流布局_jquery

HTML 复制代码代码如下: <div id="main"> <div class="box"> <div class="pic"> <img src="images/0.jpg" alt=""> </div> </d

jquery实现简单的瀑布流布局_jquery

是开头都会说的原理瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流从布局的角度来说,就是4个li标签.通过一定的事件(比如滚动条滚动多少px),然后读取之,再把数据动态地添加到页面中. 添加数据原则,不是根据li索引值来加,而是根据各列中高度最短的的那列动态添加.否则可能导致页面很难看(左右高度不统一). 实例涉及ajax方法.可在服务器环境下运行. 废话不多说了.直接上样式. <ul id=&qu