瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。
下面是效果:
核心内容:
1.先设置布局,主要HTML代码如下
<div id="container"><div class="box"><div class="content"><img src="../imgs/Girls/01.jpg"></div></div>...</div>
然后设置宽度固定,高度自适应,.box 相对布局,向左浮动:
.box {position: relative; float: left; }.content {padding: 2px; border: 1px solid #ccc; border-radius: 2px; }.content img {width: 234px; height: auto; }#container {background: #fff none repeat scroll 0 0; margin: 0 auto; width: auto; }
2.图片位置摆放
因为图片的高度不一致,先根据页面大小获取第一行的图片数量,然后把第二行第一个张图片放到第一行高度最低的图片下面,以此类推:
function imgLocation() {var box = $(".box");var boxWidth = box.eq(0).width(); //获取第一张图片的宽度var num = Math.floor($(window).width()/boxWidth); //确定一排能放多少张图片var container = num * boxWidth+"px";$("#container").css("max-width",container);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});//重新计算高度boxArr[minboxIndex] += box.eq(index).height();}});}
3.滚动加载
然后通过判断鼠标是否滑动到底部,确定是否自动加载数据。
先判断是否滑到页面底部:
function scrollSide() {var box = $(".box");var lastBoxHeight = box.last().get(0).offsetTop + Math.floor( box.last().height()/2);// 当前页面的高度var documentHeight = $(window).height();// 鼠标滚动的高度var scrollHeight = $(window).scrollTop();return (lastBoxHeight < (scrollHeight + documentHeight))?true:false; //是否允许滚动}
然后监听滚动事件,当满足加载条件时,加载图片:
//监听鼠标监听事件window.onscroll = function () {//最后一张图片出现一半时加载if(scrollSide()){$.each(dataImg.data,function (index, value) {var box = $("<div>").addClass("box").appendTo($("#container"));var content = $("<div>").addClass("content").appendTo(box);$("<img>").attr("src",$(value).attr("src")).appendTo(content);});imgLocation();}};
PS:也可以通过Ajax 初始化图片HTML 代码:
//初始化图片function initializeImgs() {$.ajax({type:'GET',url:url4girls,dateType:'xml',success:function (data) {addImgBox(data);}});};function addImgBox(data) {var arr = $(data).find('string');$.each(arr,function (index, value) {var box = $("<div>").addClass("box").appendTo($("#container"));var content = $("<div>").addClass("content").appendTo(box);$("<img>").attr("src",$(value).text()).appendTo(content);});imgLocation();}
相关文件:
index_by_jQuery.htmlindex_by_jQuery.jsindex_by_jQuery_Ajax.htmlindex_by_jQuery_Ajax.jswaterfall.cssjquery-3.1.1.min.js
具体可查看源码