参考 http://www.sucaihuo.com/js/74.html

<script src="scripts/blocksit.min.js"></script>

1
2
3
4
5
6
7
8
<div  id="container">
    <div  class="grid">
        <!-- content -->
    </div>
    <div  class="grid">
    <!-- content -->
    </div>
</div>

  

$(document).ready(function() {
//blocksit define
$(window).load( function() {
$('#container').BlocksIt({
numOfCol: 5, //一排放的个数
offsetX: 0, //横向距离
offsetY: 0, //纵向距离
blockElement: '.grid' //瀑布流的盒子
});
}); //window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 300;
col = 1
} else if(winWidth < 880) {
conWidth = 660;
col = 2
} else if(winWidth < 1100) {
conWidth = 880;
col = 3;
} else {
conWidth = 1100;
col = 5;
} if(conWidth != currentWidth) {
currentWidth = conWidth;
$('#container').width(conWidth);
$('#container').BlocksIt({
numOfCol: col,
offsetX: 0,
offsetY: 0
});
}
});
});

  

jQuery超酷响应式瀑布流效果的更多相关文章

  1. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  2. 响应式瀑布流插件Grid-A-Licious

    Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...

  3. js实现响应式瀑布流

    导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest ...

  4. (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

  5. 15个非常棒的jQuery无限滚动插件【瀑布流效果】

    现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

  6. Bootstrap 响应式瀑布流 (使用wookmark)

    使用瀑布布局 官方 http://www.wookmark.com/jquery-plugin GitHub https://github.com/GBKS/Wookmark-jQuery  (下载后 ...

  7. javascript适合移动端的响应式瀑布流插件实例演示

    在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...

  8. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  9. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

随机推荐

  1. beego项目和go项目 打包部署到linux

    参考文章: https://www.jianshu.com/p/64363dff9721 [beego项目] 一. 打包 1. 打开Terminal 定位到工程的 main.go 文件夹目录 2. 执 ...

  2. WCF中事务处理

    一.引言 今天来介绍下WCF对事务的支持. 二.WCF事务详解 2.1 事务概念与属性 首先,大家在学习数据库的时候就已经接触到事务这个概念了.所谓事务,它是一个操作序列,这些操作要么都执行,要么都不 ...

  3. mui ajax提交问题点

    <script type="text/javascript" charset="utf-8"> mui.init(); mui.ajax(__tes ...

  4. python并发编程之多进程(实践篇)

    一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了multiproce ...

  5. 字典的setdefault()

    setdefault(key, default) 函数 ---有key获取值.没key设置 key:default dict.setdefault(key, default=None) 如果 key ...

  6. shell习题第12题:批量创建用户

    [题目要求] 用shell脚本实现如下需求 添加user_00 -- user_09 10个用户,并且给他们设置一个随机密码,密码要求10位包含大小写字母及数字,注意要把每个用户的密码记录到一个日志文 ...

  7. LocalDate与Date转化

    // 01. java.util.Date --> java.time.LocalDateTimepublic void UDateToLocalDateTime() { java.util.D ...

  8. 怎样实现跨域AJAX请求发送Cookie

    第一步: 服务器必须在Response Header中设置: Access-Control-Allow-Credentials: true 第二步: 客户端发起请求时需要将 xhr.withCrede ...

  9. python+django学习四

    1.setting.py中设置好   STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')] 前端文件存 ...

  10. [转载]linux的top命令中cpu信息的含义

    https://www.cnblogs.com/wjoyxt/p/4918742.html 原文很好,我就不摘录了.