这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本篇文章主要介绍了照片瀑布流效果,实现图片自动加载的瀑布流效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
看了网上的瀑布流教程,自己跟着写了遍,然后总结了下知识点
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <script type="text/javascript" src="jquery-1.8.3.min.js"/></script>
- <script type="text/javascript" src="script2.js"/></script>
- <title></title>
- <style type="text/css">
- *{padding: 0;margin:0;}
- #main{
- margin-top: 10px;
- position: relative;
- }
- .pin{
- margin:0;
- padding:0 0 5px 3px;
- float:left;
- }
- .box{
- padding: 10px 5px 0 5px;
- border:1px solid #ccc;
- box-shadow: 0 0 6px #ccc;
- border-radius: 5px;
- }
- .box img{
- border:0;
- margin:0;
- width:200px;
- height:auto;
- }
- </style>
- </head>
- <body>
- <div id="main">
- <div class="pin">
- <div class="box">
- <img src="images/1.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/2.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/3.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/4.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/5.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/6.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/7.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/8.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/9.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/1.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/2.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/3.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/4.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/5.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/6.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/7.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/8.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/9.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/1.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/2.jpg"/>
- </div>
- </div>
- <div class="pin">
- <div class="box">
- <img src="images/3.jpg"/>
- </div>
- </div>
- </div>
- </body>
- </html>
用 js 实现部分:
- window.onload = function() {
- waterfall('main', 'box');
- var dataimg = {
- 'data': [{
- 'src': '1.jpg'
- },
- {
- 'src': '2.jpg'
- },
- {
- 'src': '3.jpg'
- },
- {
- 'src': '4.jpg'
- },
- {
- 'src': '5.jpg'
- },
- {
- 'src': '6.jpg'
- },
- {
- 'src': '7.jpg'
- },
- {
- 'src': '8.jpg'
- },
- {
- 'src': '9.jpg'
- }]
- };
- window.onscroll = function() {
- if (checkscrollside()) {
- var main = document.getElementById('main');
- for (var i = 0; i < dataimg.data.length; i++) {
- var pin = document.createElement('div');
- pin.className = 'pin';
- main.appendChild(pin);
- var box = document.createElement('div');
- box.className = 'box';
- pin.appendChild(box);
- var img = document.createElement('img');
- img.src = 'images/' + dataimg.data[i].src;
- box.appendChild(img);
- }
- waterfall('main', 'box');
- };
- }
- }
- function $$(clsName, ele) {
- //如果当前浏览器支持通过类名获取元素,直接返回
- if (document.getElementsByClassName) {
- return (ele || document).getElementsByClassName(clsName);
- } else {
- //尽量把这些量存放在变量中,否则
- //例如循环不用len,而用nodes.length,会每一次循环都遍历一次
- var nodes = (ele || document).getElementsByTagName("*"),
- eles = [],
- len = nodes.length i,
- j,
- currNode,
- clsNames,
- clsLen;
- for (i = 0; i < len; i++) {
- currNode = nodes[i];
- clsNames = currNode.className.split(' ');
- clsLen = clsNames.length;
- for (j = 0; j < clsLen; j++) {
- if (clsNames[j] == clsName) {
- eles.push(currNode);
- break;
- }
- }
- }
- return eles;
- }
- }
- //知识点一:js中通过属性offset--等,但padding,margin等只能获取在内联html中有的样式,
- //因此,下面这个函数是获取css样式的通用函数。
- var getStyle = function(dom, attr) {
- return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
- }
- function waterfall(parent, box) {
- var main = document.getElementById(parent);
- var boxes = $$(box, main);
- var pins = $$('pin', main);
- //console.log(boxes.length);
- var pinw = pins[0];
- var boxw = boxes[0].offsetWidth + parseInt(getStyle(pinw, 'paddingLeft'));
- console.log(boxes[0].clientWidth);
- //console.log(boxw+','+main.clientWidth+','+main.offsetWidth+','+getStyle(boxes[0],'margin'));
- var cols = Math.floor(document.documentElement.clientWidth / boxw);
- console.log(cols);
- main.style.width = cols * boxw + 'px';
- var boxesh = [];
- for (var i = 0; i < boxes.length; i++) {
- if (i < cols) {
- boxesh.push(boxes[i].offsetHeight + parseInt(getStyle(pinw, 'paddingBottom')));
- } else {
- var minh = Math.min.apply(null, boxesh);
- var index = getMinIndex(boxesh, minh);
- boxes[i].style.position = 'absolute';
- boxes[i].style.top = minh + 'px';
- boxes[i].style.left = index * boxw + 'px';
- boxesh[index] += boxes[i].offsetHeight + parseInt(getStyle(pinw, 'paddingLeft'));
- }
- }
- }
- function getMinIndex(arr, val) {
- for (var i = 0; i < arr.length; i++) {
- if (arr[i] == val) return i;
- }
- }
- function checkscrollside() {
- var main = document.getElementById('main');
- var aPin = $$('pin', main);
- console.log(aPin.length);
- var lastPinH = aPin[aPin.length - 1].offsetTop + Math.floor(aPin[aPin.length - 1].offsetHeight / 2);
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- var documentH = document.documentElement.clientHeight; //页面高度
- return (lastPinH < scrollTop + documentH) ? true: false;
- }
用 jQuery 实现部分:
- //知识点一:jquery事件绑定
- $(window).on('load',
- function() {
- waterfall();
- var dataimg = {
- 'data': [{
- 'src': '1.jpg'
- },
- {
- 'src': '2.jpg'
- },
- {
- 'src': '3.jpg'
- },
- {
- 'src': '4.jpg'
- },
- {
- 'src': '5.jpg'
- },
- {
- 'src': '6.jpg'
- },
- {
- 'src': '7.jpg'
- },
- {
- 'src': '8.jpg'
- },
- {
- 'src': '9.jpg'
- }]
- };
- $(window).on('scroll',
- function() {
- if (checkScrollSlide()) {
- //知识点二:数组遍历
- //知识点三:value参数是DOM对象
- $.each(dataimg.data,
- function(key, value) {
- //知识点四:创建DOM元素,不需要createElement('div');
- //知识点五:为元素绑定class,不再是className='';
- //知识点六:往元素中填充元素,不再是obj.appendChild(obj);
- //知识点七:属性的获取和设置,可以直接用attr (注意这是针对jquey对象的方法);
- var oBox = $('<div>').addClass('pin').appendTo($('#main'));
- var oPic = $('<div>').addClass('box').appendTo($(oBox));
- $('<img>').attr('src', 'images/' + value.src).appendTo($(oPic));
- }) waterfall();
- }
- })
- })
- function waterfall() {
- var $boxs = $('#main>.pin');
- //知识点八:jquery中的outerWidth(false)方法==js中的offsetWidth属性
- //innerWidth()==clientWidth;
- //width()==width;
- var w = $boxs.eq(0).outerWidth(false);
- //console.log(w);
- var cols = Math.floor($(window).width() / w);
- //知识点九:jquery可以直接css(),js是obj,style.margin: ect;
- $('#main').width(cols * w).css('margin', '10px auto');
- var hArr = [];
- //注意,这儿value是DOM对象
- $boxs.each(function(index, value) {
- var h = $boxs.eq(index).outerHeight(false);
- if (index < cols) {
- hArr.push(h);
- } else {
- var minH = Math.min.apply(null, hArr);
- //知识点十:jquey中直接封装了一个数组中找取某个值对应下标的方法
- var minHIndex = $.inArray(minH, hArr);
- $(value).css({
- 'position': 'absolute',
- 'top': minH + 'px',
- 'left': minHIndex * w + 'px',
- });
- hArr[minHIndex] += $boxs.eq(index).outerHeight(false);
- }
- })
- //console.log(hArr);
- }
- function checkScrollSlide() {
- //知识点十一:可以直接last()方法获取最后一个元素
- var $lastBox = $('#main>div').last();
- //知识点十二:js中的一系列offsetTop等属性,变成了jquey中的offset().top ect;
- var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight(false) / 2);
- var scrollTop = $(window).scrollTop();
- var documentH = $(window).height();
- return (lastBoxDis < scrollTop + documentH) ? true: false;
- }
来源: http://www.phperz.com/article/17/0505/328962.html