jQuery实现瀑布流

HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="foo.css">
<script src="jquery-1.11.3.js"></script>
<!-- <script src="bootstrap.min.js"></script> -->
<!-- <script src="myjQuery.js"></script> -->
<script src="foo.js"></script>
</head>
<body>
<div id="container">

<div class="box">
<div class="content">
<img src="img/1.jpg">
<p>hello world</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/10.jpg">
</div>
</div>

</div>
</body>
</html>

-------------------------

<div id="container">

<div class="box">
<div class="content">
<img src="img/1.jpg">
<p>hello world</p>
</div>
</div>

</div>

css:

*{
padding: 0;
margin: 0;
}
.box{
position: relative;
float: left;

}
.content{
margin: 10px;
padding: 0px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.content img{
width: 359px;
height: auto;
}

js:

$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
});
});

function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr = [];
box.each(function(index,value){
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index] = boxHeight;
}else{
var minboxHeight = Math.min.apply(null,boxArr);
var minboxIndex = $.inArray(minboxHeight,boxArr);
$(value).css({
"position": "absolute",
"top": minboxHeight,
"left": box.eq(minboxIndex).position().left//; not
});
boxArr[minboxIndex] += box.eq(index).height();
}
});
}

//function(index,value) index and value are array
//console.log(index+"--"+value);
//console.log(boxHeight);
//console.log(minboxHeight);
//console.log(minboxIndex);
// console.log(value);

时间: 2024-11-08 09:27:18

jQuery实现瀑布流的相关文章

【前端】用jQuery实现瀑布流效果

jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流的应用: 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不

jQuery实现瀑布流的简单方法

HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waterFall</title> <link rel="stylesheet" href="wf.css"> <script src="jquery.js">

用JavaScript和jQuery实现瀑布流

▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main"> <div class="box"> <div class="pic"><img src="images/1.jpg" alt=""></div> </div>

jquery版瀑布流

原文:jquery版瀑布流 一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 <div class="header">header</div> <div class="box clearfix"> <div class="waterFall"> <

用jQuery实现瀑布流效果学习笔记

jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把其中的几个函数具体记录一下. 首先,在WebStorm中新建一个工程,导入jquery库和几张img放在img文件夹下,新建html和css文件,用来搭建基本的网页结构.我们设定图片的宽度固定,高度不定,绝对定位,左浮动.这里就不细说了.我们主要讲jquery部分的知识. 这里我们讲一下我们要实现的

网友微笑分享原创Jquery实现瀑布流特效

首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原代码,里面的每个功能注释写得非常详细.. 主要包括了以下几个功能函数:1.瀑布流主函数2.获取高度最小的列的函数3.判断请求数据的开关的函数4.请求数据加载的样式的函数 瀑布流代码如下: JS与CSS代码 /** * 作者:微笑 * QQ:904835003 * 邮箱:[email protecte

jquery实现瀑布流并与php实现数据交互

以前js 实现过一个瀑布流,jquery 也来实现一个 主要思路: 1  先显示出来大概20张图片,使界面出现滚动条 2 设置显示出来图片父id 设置为relative 定位,图片定位方式为float 定位 3 使刚显示出来的图片作为折叠出现,呈现为瀑布流 4 当滚动 滚动条时,判断是否进行加载图片 5 使新加载的图片重新进行瀑布流排序 重点: 1 判断什么时间进行加载新图片 2 实现瀑布流式排序 怎样确定加载哪部分图片那,在后台limit 一下位置就ok啦 好,上代码: 1 先显示出来部分图片

用jquery实现瀑布流案例

一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   2.排列的方式  3.如何实现排列 其实,在瀑布流里有个核心的功能就是用到了绝对定位 我们逐步深入分析: 这是html的布局,css布局可以自己设置,只要保证grid盒子有绝对定位,其父元素有相对定位即可!后面有参考代码 下面是script部分 这种方式,可以通过for循环按照顺序获取图片的索引值,

Jquery之瀑布流

效果图展示: 示例代码如下: html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ padding: 0; margin:0; font-family: "微软雅黑"; text-align: center

前端jQuery实现瀑布流

瀑布流是我们经常会见到的东西,一直刷新一直有,其实它实现起来是很简单的.具体代码如下 1.css代码 <style> *{ margin: 0; padding: 0; } .container{ position: relative; } .container .box{ float: left; padding:15px 0 0 15px; } .container .box .pic{ border:1px solid #ccc; padding:10px; border-radius: