<!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. Gradle 打多渠道包

    使用gradle 打多渠道包记录经验如下图可见,每个渠道是包含debug 和realse版本的.通过打印BASE_URL 发现在渠道和版本中都可以修改BuildConfig的常量,这样一次可以打出多个 ...

  2. docker 相关

    https://www.cnblogs.com/neptunemoon/p/6512121.html centos7 安装docker1.更新yum包yum update2.卸载旧版本(如果安装过旧版 ...

  3. TabLayout占不满屏幕所有宽度

    <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_wi ...

  4. 用 ghostscript 转化PDF文件为图片 的参数设置

    example: gswin32 -dSAFER -dBATCH -dNOPAUSE -r300 -dTextAlphaBits=4 -dGraphicsAlphaBits=4 -sDEVICE=jp ...

  5. SpringBoot之基础

    简介 背景 J2EE笨重的开发 / 繁多的配置 / 低下的开发效率 / 复杂的部署流程 / 第三方技术集成难度大 特点 ① 快速创建独立运行的spring项目以及主流框架集成 ② 使用嵌入式的Serv ...

  6. 网络yum源制作

    思路:在网络上准备一个主机,在其中安装一个web服务器软件(比如apache),然后创建一个目录,在这个目录中准备上yum仓库的全部资源,如果用户可以通过网络访问到该主机的这个目录,那么这个目录就成为 ...

  7. 《DOM Scripting》学习笔记-——第五章、第六章 案列改进

    第四章的案例代码可以得到更好的改进.例如:预留退路.向后兼容性和分离js. 原html代码: <!DOCTYPE html> <html lang="en"> ...

  8. 20175213吕正宏 MyCP（课下任务，必做）

    一.任务详情: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件( ...

  9. cv2.error: openCV报错

    运行openCV程序,出现了.cv2.error: OpenCV(4.1.0) D:\Build\OpenCV\opencv-4.1.0\modules\imgproc\src\color.cpp:1 ...

  10. Educational Codeforces Round 30 D. Merge Sort

    题意:给你n和k,n代表有多少个数,k代表几次操作,求一个1到n的序列,要k次mergesort操作才能还原 Examples Input 3 3 Output 2 1 3 Input 4 1 Out ...