`
chembo
  • 浏览: 940852 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery 瀑布流插件

阅读更多
基于jquery,支持window-resize和ajax取数据;
测试通过ie6+,FF3+,chrome,safari;
github地址:https://github.com/chembohuang/jquery.waterfall.plugin
demo地址:http://paradise4ever.com/waterfall/demo.html

使用:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cb.waterfall.plugin.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#photo_wall").waterfall({
        ajaxUrl         :"ajaxData.txt",            ////ajax url. e.g. /server/loadMorePics.php. return json data as {["src":"2.jpg","desc":"description","link":"#"],["src":"4.jpg","desc":"description","link":"#"]}  
        ajaxParams      :{"count":20,"userId":30},  //ajax params. e.g. {"name":"chembo","loadPic":"10"}
        ajaxCount       :5,                         //the total times of the ajax will run when scroll hits the bottom. default to 4.
        block_class     :"ablock",                  //one block's width. default to ablock.
        margin          :3,                         //the margin between two blocks. unit is the px. default to 3.
        block_width     :230,                       //one block's width.
        animate_duration:500                        //jquery animate duration. unit is the million-second. default to 1000.
    });
});

效果图:
  • 大小: 142.9 KB
分享到:
评论

相关推荐

    Jquery 瀑布流插件

    jQuery瀑布流插件正是结合了这两种技术,为网页开发提供了快速构建瀑布流布局的工具。 瀑布流布局的特点在于,每个元素(如图片或卡片)在页面上以多列的形式排列,随着浏览器窗口的宽度变化,元素会自动调整自身...

    jquery瀑布流插件

    **jQuery瀑布流插件详解** 瀑布流布局,也称为Masonry布局,是一种常见的网页布局方式,主要用于图片展示或内容排列,使得页面在不同分辨率的设备上都能呈现出良好的视觉效果。这种布局方式的特点是元素可以自动...

    Jquery瀑布流插件

    **jQuery瀑布流插件**是一种基于JavaScript库jQuery的布局插件,主要用于实现网页上元素的瀑布流式布局。这种布局模式通常应用于图片展示、商品目录等场景,它能够让页面中的元素自适应地按照一定规则排列,形成类似...

    jQuery瀑布流插件Grid-A-Licious.zip

    **jQuery瀑布流插件Grid-A-Licious** 在Web开发中,瀑布流布局是一种常见的网页设计方式,它模拟了瀑布从高处垂直下落的效果,使得页面上的内容元素能够以一种美观且富有层次的方式呈现。jQuery作为一款强大的...

    基于jQuery 瀑布流插件

    jQuery瀑布流插件的工作原理通常是这样的:首先,它获取页面加载时可见区域内的元素,并根据浏览器窗口的大小计算出这些元素的理想位置。然后,当用户滚动页面时,插件会监听滚动事件,判断新进入视口的元素并进行...

    Jquery瀑布流插件使用介绍

    总的来说,这款Jquery瀑布流插件通过封装了瀑布流布局的核心算法和交互处理,使得开发者可以快速地在项目中实现瀑布流效果,而无需从头编写复杂的布局代码。通过调整参数和扩展回调函数,开发者可以根据实际需求进行...

    jQuery瀑布流插件BlocksIt.zip

    《jQuery瀑布流插件BlocksIt详解》 在前端开发中,瀑布流布局是一种常见的网页设计方式,它将页面上的元素以多列的形式排列,形成一种类似瀑布的效果,每一列的高度根据内容自适应。jQuery作为一款强大的JavaScript...

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

    jQuery Masonry插件是由David DeSandro开发的,它允许开发者轻松创建动态的、响应式的瀑布流布局。这个插件的工作原理是通过计算每个元素的宽度和当前列的高度,将新的元素放置在最适合的位置,以形成连续的瀑布状...

    jQuery Wookmark瀑布流插件

    jQuery Wookmark瀑布流插件是一款广泛应用于网页布局的JavaScript工具,它允许开发者轻松实现网格布局,特别是“瀑布流”效果。瀑布流布局是一种流行的设计模式,常用于图片展示、电商产品陈列等场景,它的特点是...

    jQuery 瀑布流插件,适用于移动端

    本插件是专为移动端设计的jQuery瀑布流组件,其主要功能包括: 1. **自适应布局**:根据设备屏幕大小自动调整图片的排列方式,确保在不同分辨率和屏幕尺寸的移动设备上都能呈现良好的视觉效果。 2. **动态加载**:...

    流行的jquery瀑布流插件wookmark

    Wookmark是基于jQuery的一个轻量级的瀑布流插件,它的核心目标是提供简单易用的API,帮助开发者快速构建具有瀑布流布局的网页。Wookmark不仅支持响应式设计,还能自动调整元素的排列方式,以适应不同分辨率和屏幕...

    jQuery瀑布流画廊,瀑布流动态加载

    jquery瀑布流插件

    jquery.waterfall.plugin-master.zip,jquery瀑布流插件

    jQuery Waterfall Plugin是基于JavaScript库jQuery实现的一种瀑布流插件,它能帮助开发者轻松地创建具有这种布局效果的网页。 在jQuery Waterfall Plugin中,主要涉及以下核心知识点: 1. **jQuery库**:jQuery是...

    jquery网站瀑布流插件masonry.zip

    总的来说,jQuery Masonry插件是实现瀑布流布局的强大工具,适用于创建动态、响应式的图片相册和其他内容展示页面。它的灵活性和易用性使其在网页开发中得到了广泛的应用。开发者可以根据自己的需求调整插件的配置,...

Global site tag (gtag.js) - Google Analytics