<!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. .htaccess: Invalid command 'Header', perhaps misspelled or defined by a module not included in the server configuration

    php项目 .htaccess文件配置如下: #文件缓存时间配置 <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css)$"& ...

  2. NFS服务器工作原理

    一.NFS简介 NFS是Network File System的缩写,中文称为网络文件系统,它的主要功能是通过网络(一个局域网)让不同的主机系统之间可以共享文件或目录,NFS的客户端(一般为应用服务器 ...

  3. REST架构简析（原论文整理）

    0 引言        目前,互联网在社会中扮演的角色越来越重要.通过互联网为广大群众提供服务,也是互联网成功的关键.互联网服务架构目前大多数都是基于REST架构来完成的.REST从它诞生至今,可以说 ...

  4. Django 2.0 新款URL配置详解

    Django2.0发布后,很多人都拥抱变化,加入了2的行列.但是和1.11相比,2.0在url的使用方面发生了很大的变化,下面介绍一下: 一.实例 先看一个例子: from django.urls i ...

  5. MVC 执行顺序

    MVC在底层和传统的asp.net是一致的,在底层之上,相关流程如下: 1)Global.asax里,MvcApplication对象的Application_Start()事件中,调用 RouteC ...

  6. Mac系统如何显示隐藏文件？

    显示全部文件 defaults write com.apple.finder AppleShowAllFiles -bool true osascript -e 'tell application & ...

  7. SVN命令行操作

    参考 https://wenku.baidu.com/view/511a7d29ed630b1c59eeb5f3.html 1, 将文件checkout到本地目录 svn check out http ...

  8. logback kafkaAppender输出日志到kafka

    官网地址https://github.com/danielwegener/logback-kafka-appender 本文以spring boot项目为基础,更多的信息,请参考官网 https:// ...

  9. django-rest-framework配置json web token

    安装jwt库,简单快速的生成我们所需要的token 1.安装djangorestframe pip install djangorestframe 2.在settings.py的INSTALLED_A ...

  10. Linux 基本使用

    1.mkdir 创建文件夹 mkdir filename; 2.touch 创建文件 touch file.txt; 3.chmod 变更文件或目录的权限 chmod -R u+x ./;