<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gb2312">
<title>jquery瀑布流排列样式代码</title>
<style>
body{margin:0}
</style>
</head>
<body>

<div class="grid">
<img src="data:images/asian-landscape.jpg">
<img src="data:images/traditional-landscape.jpg">
<img src="data:images/contemporary-landscape.jpg">
<img src="data:images/rustic-landscape.jpg">
<img src="data:images/traditional-landscape.jpg">
<img src="data:images/beach-style-landscape.jpg">
<img src="data:images/farmhouse-landscape.jpg">
<img src="data:images/contemporary-landscape.jpg">
<img src="data:images/traditional-landscape.jpg">
<img src="data:images/contemporary-landscape.jpg">
<img src="data:images/contemporary-landscape.jpg">
<img src="data:images/mediterranean-landscape.jpg">
<img src="data:images/mediterranean-landscape.jpg">
<img src="data:images/contemporary-landscape.jpg">
<img src="data:images/farmhouse-landscape.jpg">
<img src="data:images/traditional-landscape.jpg">
<img src="data:images/contemporary-landscape.jpg">
<img src="data:images/asian-landscape.jpg">
<img src="data:images/farmhouse-landscape.jpg">
<img src="data:images/tropical-landscape.jpg">
<img src="data:images/traditional-landscape.jpg">
<img src="data:images/traditional-landscape.jpg">
</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" >
'use strict';
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(jQuery);
}
}(function ($) {
$.fn.extend({
imagesLoaded: function(cb)
{
var images = $(this).find('img');
var count = images.length;
if (count == 0) cb();
for(var i = 0, length = images.length; i< length; i++)
{
var image = new Image();
image.onload = image.onerror = function(e){
count --;
if (count == 0) cb()
}
image.src = images[i].src;
}
},
gridify: function(options) {
var $this = $(this),
options = options || {},
indexOfSmallest = function (a) {
var lowest = 0;
for (var i = 1, length = a.length; i < length; i++) {
if (a[i] < a[lowest]) lowest = i;
}
return lowest;
},
render = function()
{
$this.css('position', 'relative');
var items = $this.find(options.srcNode),
transition = (options.transition || 'all 0.5s ease') + ', height 0, width 0',
width =

$this

.innerWidth(),
item_margin = parseInt(options.margin || 0),
item_width = parseInt(options.max_width || options.width || 220),
column_count = Math.max(Math.floor(width/(item_width + item_margin)),1),
left = column_count == 1 ? item_margin/2 : (width % (item_width + item_margin)) / 2,
columns = [];

if (options.max_width) {
column_count = Math.ceil(width/(item_width + item_margin));
item_width = (width - column_count * item_margin - item_margin)/column_count;
left = item_margin/2;
}

for (var i = 0; i < column_count; i++) {
columns.push(0);
}

for(var i = 0, length = items.length; i< length; i++)
{
var

$item = $(items[i]), idx = indexOfSmallest(columns);
$item.css({
width: item_width,
position: 'absolute',
margin: item_margin/2,
top: columns[idx] + item_margin/2,
left: (item_width + item_margin) * idx + left,
transition: transition
});
columns[idx] += $item.innerHeight() + item_margin;
}
};

$this.imagesLoaded(render);
if (options.resizable) {
var resize = $(window).bind("resize", render);
$this.on('remove', resize.unbind);
}
}
});
}));
</script>

<script type="text/javascript">
$(window).load(function() {
var options =
{
srcNode: 'img', // grid items (class, node)
margin: '20px', // margin in pixel, default: 0px
width: '250px', // grid item width in pixel, default: 220px
max_width: '', // dynamic gird item width if specified, (pixel)
resizable: true, // re-layout if window resize
transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
}
$('.grid').gridify(options);
});
</script>

</body>
</html>

jquery瀑布流排列样式代码的更多相关文章

  1. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  2. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  3. 基于jQuery图片自适应排列显示代码

    基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  5. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

  6. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  7. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

  8. jQuery瀑布流详解（PC及移动端）

    前言 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我 ...

  9. jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...

随机推荐

  1. API手册（2017）

    本页存放内容: API手册. 少量教程 [旧的工具页面] (是一些旧的页面.不放在外面了,这里做个索引) http://www.cnblogs.com/qq21270/p/3538677.html 常 ...

  2. LeetCode 147. Insertion Sort List 链表插入排序 C++/Java

    Sort a linked list using insertion sort. A graphical example of insertion sort. The partial sorted l ...

  3. 转载及总结：cron表达式详解，cron表达式写法，cron表达式例子

    cron表达式格式:{秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)}例  "0 0 12 ? * WED" 在每星期三下午12:00 执行(年份通常 ...

  4. kettle删除移动文件

  5. java序列化和反序列化中的serialVersionUID有啥用

     1.什么是序列化和反序列化 序列化就是将java对象转成字节序列的过程:反序列化就是将字节序列转成java对象的过程. java中,序列化的目的一种是需要将对象保存到硬盘上,一种是对象需要在网络中传 ...

  6. Spring Boot实现文件下载功能

    我们只需要创建一个控制器(Controler)文件,即Controller目录下的File_Download.java,其完整目录如下: @Controller public class File_D ...

  7. Django之视图

    Django之视图   Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个 ...

  8. 回溯法 17. Letter Combinations of a Phone Number

    class Solution { public: map<char,string> dict; vector<string> letterCombinations(string ...

  9. TCPlayer web切换播放问题

    遇到播放的视频无法切换的问题,,即便是清除标签重新生成也不行~~ 需要使用自带的API ~别无他法 demo: http://imgcache.qq.com/open/qcloud/video/tcp ...

  10. Linux命令:内建命令

    本文对内建命令进行归类,便于学习和记忆. 分类 内建命令 同义词 功能相反命令 定义&声明类 alias   unalias declare typeset   local     reado ...