瀑布流布局（等宽不等高jQuery）
在百度上看见的好多都是引用Masonry插件 ，之后我自己尝试了一个没有使用插件的
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="../picture/1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/2.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/3.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/4.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/5.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/6.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/2.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/4.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/5.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/6.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/2.png">
</div>
</div>
</div>
</body>
下面是全部的css比较简单
<style>
* {
margin:;
padding:;
} #main {
position: relative;
width: 900px;
margin: 0 auto;
} .box {
padding: 15px 0 0 15px;
float: left;
} .pic img {
width: 165px;
height: auto;
}
</style>
最重要的这一段啦
<script>
$(window).on('load', function() {
waterfall();
var dataInt = {
"data": [{
"src": "../picture/1.png"
}, {
"src": "../picture/2.png"
}, {
"src": "../picture/3.png"
}]
};
})
function waterfall() {
var $boxs = $('#main>div');
var w = $boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width() / w);
$('#main').width(w * cols).css('margin', '0 auto');
var hArr = [];
$boxs.each(function(index, value) {
var h = $boxs.eq(index).outerHeight();
if (index < cols) {
hArr[index] = h;
} else {
var minH = Math.min.apply(null, hArr);
var minHIndex = $.inArray(minH, hArr);
$(value).css({
'position': 'absolute',
'top': minH + 'px',
'left': minHIndex * w + 'px'
})
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
}) } </script>
下面这段jq 是可以根据鼠标轮播 下拉加载页面
<script>
$(window).on('load', function() {
waterfall();
var dataInt = {
"data": [{
"src": "../picture/1.png"
}, {
"src": "../picture/2.png"
}, {
"src": "../picture/3.png"
}]
};
$(window).on('scroll', function() {
if (checkScrollSlide) {
$.each(dataInt.data, function(key, value) {
var oBox = $('<div>').addClass('box').appendTo($('#main'));
var oPic = $('<div>').addClass('pic').appendTo($(oBox));
var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo($(oPic));
})
waterfall();
}
})
})
function waterfall() {
var $boxs = $('#main>div');//包含选择器， 空格选择器会选择所有的子元素 ，> 取mian元素的第一个子元素
var w = $boxs.eq(0).outerWidth();// 列宽 width（）只能获得图片的宽度，outerWidth（）能获得包括边界的宽度
var cols = Math.floor($(window).width() / w);
$('#main').width(w * cols).css('margin', '0 auto');
var hArr = [];
$boxs.each(function(index, value) {
var h = $boxs.eq(index).outerHeight();// 获取每个图片的高
if (index < cols) {
hArr[index] = h;// 获取第一行的高度
} else {
var minH = Math.min.apply(null, hArr);// 获取最矮图片的索引
var minHIndex = $.inArray(minH, hArr);inArray函数能获取指定数值的索引
console.log(value);
$(value).css({
'position': 'absolute',
'top': minH + 'px',
'left': minHIndex * w + 'px'
})
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide() {
var $lastBox = $('#main>div').last();// 获取最后一个图片
var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);// 最后一个图片距离父元素的高度和自身一半的高度
var scrollTop = $(window).scrollTop();// 划过的高度
var documentH = $(window).height();//浏览器的高度
return (lastBoxDis < scrollTop + documentH) ? true : false;
} </script>
两个js的 区别：前者没有下拉加载效果 后者有下拉加载效果
瀑布流布局（等宽不等高jQuery）的更多相关文章
- flexbox实现不等宽不等高的瀑布流布局
第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...
- js实现网页瀑布流布局
效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- JS原生方法实现瀑布流布局
html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...
- Ajax+json+jquery实现无限瀑布流布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...
随机推荐
- cycle标签和random两种方式美化表格
一:cycle标签实现给表格变色 1. <style>标签里写好需要的颜色 2. 在要变色的地方(行/列)加固定的语句,按照顺序依次执行 代码: <!DOCTYPE html> ...
- 微信小程序如何实现点击链接跳转到手机自带浏览器
最近遇到一个需求.公司有一个业务,制作的小程序需要跳出微信打开一个指定的我们自己的页面,拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的第三方开发文档我们都查阅过资料但是最终只找 ...
- 微信中H5网页如何唤醒打开外部浏览器打开指定链接
最近遇到一个需求.朋友找我制作一个在微信中的聊天框,或者公众号菜单发布一条链接或者二维码.跳出微信打开一个指定的我们自己的页面, 拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的 ...
- 判断是否为JSON对象
$.ajax({ type: 'POST', url: url, success(function(data){ //判断是否为JSON对象 if(typeof(data) == "obje ...
- JQuery 中$("input:eq(0)") eq 的意思
:eq(index)匹配一个给定索引值的元素 ----------------------------------------------------- Matches a single elemen ...
- UnicodeDecodeError: 'gbk' codec can't decode byte 0xa7 in position 166: illegal multibyte sequence
# -*- coding: utf-8 -*-# encoding = utf-8import unittestimport random class TestSequenceFunctions(un ...
- spring源码解析2--容器的基本实现
spring的主要特性是IOC,实现IOC的关键是bean,而更关键的是如何bean的管理容器,也就是BeanFactory,本文的目标是弄清楚BeanFactory具体是怎么样的存在. 先看下最简单 ...
- c# WebApi之接口返回类型详解
c# WebApi之接口返回类型详解 https://blog.csdn.net/lwpoor123/article/details/78644998
- 解决pycharm左侧项目文件名中文字体乱码情况？中文显示口口口口.
解决pycharm左侧项目文件名中文字体乱码情况?中文显示口口口口. 点击file,进入settings 出现 Appearance & Behavior 点击Appearance UI Op ...
- 笔记本电脑没有Pause键，远程桌面无法全屏
用过mstsc远程桌面的都知道,可以用CTRL+ALT+Break 切换为全屏操作,但有些品牌的电脑不知道设计理念是啥,居然没有Break键,解决办法就是用Fn+B键替换Break键,也就是同时按住C ...