特效介绍
基于jQuery的一款自适应浏览器款的的瀑布流布局插件,能够根据浏览器宽度,决定显示的列数。支持鼠标滚动到底部自动加载,无限加载(前提是首次载入的图片足够多,右边会有滚动条,能够触发滚动条滚动事件)。使用非常简单,兼容性好,经测试,IE以上浏览器及其他现代浏览器都能够很好的显示。因为比较简单,就不提供下载了,根据下面的教程,就能很简单的实现了。
使用方法
1、在您的css中加入下面的代码:
.box{position:relative; float:left;} .content{padding:10px;/* border:1px solid #fff; border-radius:5px; box-shadow:0 0 5px #ccc;*/} .content img{width:246px; height:auto;border-radius:5px;}2、在html中加入下面的结构的代码:
<div id="container"> <div class="box"> <div class="content"> <img src="1.jpg"> </div> </div> ... ... </div>上面的container是外层容器,box是瀑布流的每个内容子容器,您可以根据需求自己定制box里面的内容,如标题、描述、链接等,但是切记不要给box加样式,免得影响瀑布流的效果。
3、引入jQuery
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>4、在html文件末尾加入下面的js代码:
<script type="text/javascript"> $(document).ready(function(){ $(window).on('load',function(){ imgLocation(); var dataImg = {'data':[ {'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}, ]}; 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(); }; }; }); }); function scrollside(){ var box = $('.box'); var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height()/2); var documentHeight = $(document).width(); var scrollHeight = $(window).scrollTop(); return (lastboxHeight < scrollHeight + documentHeight) ? true : false; }; 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 }); boxArr[minboxIndex] += box.eq(index).height(); }; }); $('img').hover(function(){ $(this).css({ 'opacity':'0.8', 'cursor': 'pointer' }); },function(){ $(this).css('opacity','1'); }); }; </script>