ajax+json+jquery实现无限瀑布流布局(宽定),瀑布流布局（等宽不等高jQuery）

最新推荐文章于 2023-04-07 20:16:54 发布

WebQueen

最新推荐文章于 2023-04-07 20:16:54 发布

阅读量418

点赞数

文章标签： ajax+json+jquery实现无限瀑布流布局(宽定)

在百度上看见的好多都是引用Masonry插件，之后我自己尝试了一个没有使用插件的

下面是全部的css比较简单

* {

margin:;

padding:;

}

#main {

position: relative;

width: 900px;

margin: 0 auto;

}

.box {

padding: 15px 0 0 15px;

float: left;

}

.pic img {

width: 165px;

height: auto;

}

最重要的这一段啦

$(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();

}

})

}

下面这段jq 是可以根据鼠标轮播下拉加载页面

$(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 = $('

').addClass('box').appendTo($('#main'));

var oPic = $('

').addClass('pic').appendTo($(oBox));

var oImg = $('').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;

}

两个js的区别：前者没有下拉加载效果后者有下拉加载效果

flexbox实现不等宽不等高的瀑布流布局

第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...

js实现网页瀑布流布局

效果图: html代码实现网页布局:

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瀑布流布局

瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...

Ajax+json+jquery实现无限瀑布流布局

...

AJAX+json+jquery实现预加载瀑布流布局

宽度是一定的高度不定的瀑布流布局也可以说是无缝拼图当浏览器滚动到底部时候自动加载图片加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的在ff等支持css3可以显 ...

随机推荐

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

开始研究web，mark一下

之前想要搞引擎,经过思考之后,定位为webgl方面的引擎,这个决定早就做了,只是没有写下来做了一些调研之后,确定使用babylon.js 和typescript 和c# 来开发 Babylo ...

Metro-UI系统-1-tile标签

一效果图二各个效果的详解 1,简单磁贴