<!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. 微服务架构基础之Service Mesh

    ServiceMesh(服务网格) 概念在社区里头非常火,有人提出 2018 年是 ServiceMesh 年,还有人提出 ServiceMesh 是下一代的微服务架构基础. 那么到底什么是 Serv ...

  2. 虚拟机Ubuntu18.04——gcc版本的升降

    致读者:这是本人第一篇博客,小试牛刀,希望能在以后的道路中分享出更多实用的技巧和知识,大家一起进步. 操作环境: VMware Workstation 14Pro .64位Ubuntu18.04系统 ...

  3. python3 十六进制字符串进行分割并累加

    最近忘性大,记录一下 需求: ‘80 11 F1 01 1A’字符串需要把每一个十六进制字符加起来,即80+11+F1+01+1A=? 很简单,不解释,直接上 hex(sum([int(i,16) f ...

  4. TypeError: Fetch argument 0 has invalid type <type 'int'>, must be a string or Tensor. (Can not convert a int into a Tensor or Operation.)

    6月5日的時候,修改dilated_seg.py(使用tensorflow)出現了報錯: TypeError: Fetch argument 0 has invalid type <type ' ...

  5. 我与OO （1）

    前言 “真正的勇士敢于面对惨淡的人生,敢于面对淋漓的鲜血” 我是谨慎拜读了鲁迅先生的名言,怀着崇敬的精神去接触这门课程的. 而当我真的经历了这门课程以后,我才发现,刘和珍君这样的觉悟,我们普通人,果然 ...

  6. 【活动发布】捷微H5-微信新年砍价活动，开源发布了

    活动名称: 微信新年砍价 适用项目: 捷微H5活动平台源码下载:http://yun.jeecg.org/pmall/detail/924D63E4F73B4387B75DE9B8545136C5 视 ...

  7. Servlet学习记录3

    提交表单信息 Web程序的任务是实现服务器与客户端浏览器之间的信息交互.客户端提交的信息可能来自表单里的文本框,密码框,选择框,单选按钮,复选框以及文件域.这些表单信息被以参数形式提交到了服务器.Se ...

  8. Mybatis级联：关联、集合和鉴别器的使用

    Mybatis中级联有关联(association).集合(collection).鉴别器(discriminator)三种.其中,association对应一对一关系.collection对应一对多 ...

  9. php连接mysql（linux下）

    一开始尝试了各种办法,.so文件拷贝了很多地方都失败了, 最后才知道 是编译php 没有开放 mysql ./configure --prefix=/usr/local/php5 --with-apx ...

  10. 如何激活已经运行过的Activity, 而不是重新启动新的Activity

    Intent i=new Intent(this,Activity1.class);   i.addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT);   st ...