炫酷的jquery瀑布流

最近做了一个瀑布流效果,思路很简单首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重新加载.当然中间我们可以加上一些动画效果,让网页看起来更炫酷一些. html'比较简单,这里用了li元素,给每个li外围设置了padding,内部容器设定颜色,以达成元素间隔效果,这样避免了使用maring元素最后一个还要特殊处理,当然我们还可以通过给ul设置负的margin值来解决这个问题,不过由…

8款实用的Jquery瀑布流插件

1.网友Null分享Jquery响应式瀑布流布局插件首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机浏览,效果非常棒,遗憾的是不支持IE9以下版本,所以网友们在演示的时候请使用谷歌.火狐等浏览器... 分享JquerySchool网站里面的8款Jquery瀑布流插件 2.网友sole分享23行Jquery代码实现定位瀑布流布局特效首先非常感谢网友sole的无私分享,此Jquery特效是我从互联网…

炫酷的jQuery对话框插gDialog

js有alert,prompt和confirm对话框,不过不是很美体验也不是很好,用jQuery也能实现, 体验效果:http://hovertree.com/texiao/jquery/34/ 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE…

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

很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览下载地址实例代码 <section class="grid-wrap"> <ul class="grid swipe-right" id="grid"> <li> <a href="#"><img src="/api/jq/5733e34defd95/img/14.jpg" alt=…

一款非常炫酷的jQuery动态随机背景滚动特效

一款非常炫酷的jQuery动态随机背景滚动特效图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 效果图如下:分为两层,底层的背景图片在透明图片的下方,由下向上滚动. 特效下载地址:http://www.jqshare.com/Jq/fondone/id/135.html 更多特效:jquery特效…

jquery瀑布流排列样式代码

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

10个非常炫酷的jQuery相册动画赏析

我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集了10个比较经典炫酷的jQuery相册动画,希望大家喜欢. 1.HTML5/CSS3图片左右切换弹性动画这是一款很有特点的HTML5图片切换动画,点击左右按钮即可将图片进行弹性切换,图片在被切换时,都会产生一定的弹性缓冲动画效果.这款HTML5图片应用非常适合在产品宣传页面上使用,看上起十分大气.…

jQuery超酷响应式瀑布流效果

参考 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">  </div> &…

jquery瀑布流的制作

首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述了. 二.图片展示 <div id="main"> <div class="pic"> <img src="img/1.jpg" /> </div> <div class="pic&qu…

jQuery瀑布流插件——jQuery.Waterfall

插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计算出列数,再维护一个数组,存储每列的高度,往最小高度的列添加块即可.滚动时,当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据. 注意的地方: 如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合p…

8个超炫酷的jQuery相册插件欣赏

在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建自己的相册浏览系统,对那些JS功底不怎么好的同学应该会有不少帮助. 1.jQuery幻灯片播放器插件可自动播放图片之前我们分享过很多炫酷和实用的jQuery焦点图插件,比如jQuery仿Flash横向切换焦点图插件.今天我们要再介绍一个jQuery幻灯片播放器插件,它的功能很齐全,不仅可以手动切…

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

瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(masonry+imagesloaded+infinitescroll)即使它们是如此有效,却在马上要使用的时候让我们拿着如烫手山芋班很难真正达到我们想要的效果. 下面,我们从其原理来讲解它们的使用,以帮助你更好的发挥它的功效.但为了快速实现,我们不讲解它们的全部内容. 1. 合理的HTML布局是问题的…

jQuery瀑布流插件masonry

项目要做荣誉证书的排版,宽度是统一的,但是高度不一致采用瀑布流的效果来实现默认先实现前15张,点击按钮再加载全部剩下的数据效果图首先是html部分,写好样式  <div class="about_honor"> <div class="container"> <h2> <img src="/templates/img/honor_img1.png" />…

JQuery瀑布流特效（练习）

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.11.1.js"&g…

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

前言瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我们用百度图片作为范例: 这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局: 可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里.而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似. 动手首先我们将…

超炫酷的jQuery/HTML5应用效果及源码

jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和jQuery的应用及其源码,一起来看看. HTML5动感的火焰燃烧动画特效这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果.这款HTML5动画火焰燃烧非常逼真. 核心jQuery代码: $( document ).ready(function() { // Set canvas…

jQuery 瀑布流插件: Wookmark

原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin 翻译人员: 铁锚原文日期: 2013年03月05日翻译日期: 2014年02月22日当你第一次打开图片分享网站Pinterest 时,你可能会由衷地赞叹: "哇,每列图的宽度都是相同的,而所有的图片都被裁剪显示为正确的比例." 普通用户可能觉得没什么,但作为一名开发人员,我可以领会…

jQuery瀑布流+无限加载图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } #contianer { position: relative; font-size: ; margin: auto; } .bo…

jQuery瀑布流简单示例

1,以下demo是基于window的滚动 …

jQuery瀑布流

…

[Jquery]瀑布流

$(window).load(function(e){ waterfall(); var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; $(window).scroll(function(){ if(checkscrollside()){ var $main=$("#main"); $.ea…

jQuery瀑布流插件 Masonry

http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/…

基于Bootstrap的炫酷jQuery slider插件

简要教程这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美化的效果非常好. 安装可以使用npm和bower来安装该slider插件. npm install bootstrap-slider bower install seiyria-bootstrap-slider 使用方法首先要在页面中引入必要的css和js文件. <link href="c…

服务器代理+jQuery.ajax实现图片瀑布流

服务器代理机制破解浏览器的同源策略瀑布流功能实现分析具体实现代码及业务实现分析一.服务器代理机制破解浏览器同源策略由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策略的限制,所以就可以通过服务器的后台程序获取其他域名下的资源,然后再发送给浏览器,本质上还是在同源策略下实现的,毕竟服务器没有跨域这一说法,这种机制叫做服务器代理.(这篇博客不是为了解析服务器代理,所以不对服务器代理的实现做什么分析,只简单的描述浏览器在同源基础上获取其他域名下的资源). 二.瀑布流…

基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

在线预览源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: 兼容jQuery. 高度灵活和可定制性. 灵活的用户界面的设计. 在单个HTML页面中允许存在多个实例. 可以定制每一个slider的easing效果. 多语言支持. 可以在 iOS 和 Android 上正常工作. 可以选择自动播放模式下鼠标悬停时停止播放幻灯片. 非常容易调整尺寸. 兼容外部字…

一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览源码下载简要教程这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件.第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮.第二个DEMO是第一个DEMO的升级版,它增加了图片标题.查看图片.键盘控制等其它功能. HTML结构这个3D画廊…

jQuery和CSS3炫酷button点击波特效

这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:http://www.htmleaf.com/Demo/201503151527.html 下载地址:http://www.htmleaf.com/jQuery/Buttons-Icons/201503151526.html…

jQuery UI炫酷雨滴落在水面上的波纹涟漪特效

raindrops是一款效果很炫酷的jQuery UI雨滴落在水面上的特效. 该特效模拟水滴从空中落入平静的水面上的效果. 通过參数能够设置水面波纹的大小,强度,波纹扩散的速度等等属性. 效果演示:http://www.htmleaf.com/Demo/201506041968.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201506041967.html…

移动端三合一瀑布流插件（原生JS）

没有前言,先上DEMO(手机上看效果更佳)和原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高这种形式实现起来非常容易,这里就不再多说. 二.等宽不等高这种形式算是比较正统的瀑布流布局形式,关于如何实现的请参考之前的一篇博文——jQuery瀑布流详解. 三.等高不等宽在之前的工作中接触到了这种形式的瀑布流,它的主要特点是:同一行的两张图片高度相等,宽度不等,且宽高比与原图近乎一致(没有拉伸变形).但是不同行的图片高度不一定相等,下面就介绍…

android炫酷动画源码，QQ菜单、瀑布流、二维码源码

Android精选源码自定义弹框封装,ProgressDialog,StatusDialog和Toast,支持自定义颜色有深度感的fragment代码在屏幕顶部或者底部显示提示短信转发工具,自动转发短信到手机或邮箱美观的菜单隐藏在主界面底部的抽屉导航. 仿QQ菜单.瀑布流.数据库.二维码生成 andorid实现"划词翻译"功能的项目 android界面切换的效果,输入文字时背景图缩放效果 android一款很炫的动画代码 Android雷达扫描图,超高仿QQ附近的人 Andr…

【炫酷的jquery瀑布流】的更多相关文章