-
瀑布流布局：等寬不等高查看全部
-
var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] }; window.onscroll = function() { if(checkscrollside()) { $.each(dataInt.data, function(index, value) { var oBox = $('<div>').addClass('box').appendTo($("#main")); var oPin = $('<div>').addClass('pin').appendTo($(oBox)); $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($(oPin)); }); waterfall(); }; function checkscrollside() { var $aPin = $("#main>div").last(); var lastPinH = $aPin.offset().top + Math.floor($aPin.outerHeight() / 2); //創建【觸發添加塊框函數waterfall()】的高度：最后一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載) var scrollTop = $(window).scrollTop() //注意解決兼容性 var documentH = $(document).width(); //頁面高度 return(lastPinH < scrollTop + documentH) ? true : false; //到達指定高度后 返回true，觸發waterfall()函數 }查看全部
-
function waterfall() { var $aPin = $("#main>div"); var iPinW = $aPin.eq(0).outerWidth(); // 一個塊框pin的寬 var num = Math.floor($(window).width() / iPinW); $("#main").css({ width: iPinW * num, margin: '0 auto' }); var pinHArr = []; //用于存儲 每列中的所有塊框相加的高度。 $aPin.each(function(index, value) { var pinH = $aPin.eq(index).outerHeight(); if(index < num) { pinHArr[index] = pinH; //第一行中的num個塊框pin 先添加進數組pinHArr } else { var minH = Math.min.apply(null, pinHArr); //數組pinHArr中的最小值minH var minHIndex = $.inArray(minH, pinHArr); //判斷最小高度的索引 $(value).css({ position: 'absolute', top: minH + 15, left: $aPin.eq(minHIndex).position().left }); //數組 最小高元素的高 + 添加上的aPin[i]塊框高 pinHArr[minHIndex] += $aPin.eq(index).height() + 15; //更新添加了塊框后的列高 } }); }查看全部
-
css3多欄布局column 1、column的瀏覽器兼容問題，不同內核要寫其前綴 -webkit Google瀏覽器內核 -ms IE -o opera -moz 火狐FireFox 2、column-width 和column-count沒有必要同時出現 3、column-rule設置列與列之間的邊框 4、column-gap 設置列間距，不一定定義多少，實際就顯示多少。其計算規則：用當前瀏覽器寬口寬除以定義的列寬，剩下的距離平均分配查看全部
-
floor ceil round查看全部
-
實現瀑布流的三種方式 1.JS 2.css3查看全部
-
window.onload = function () { waterfall(); } function waterfall() { var boxs = document.getElementsByClassName('box'); var boxwidth = boxs[0].offsetWidth; var row = document.documentElement.clientWidth/boxwidth; row = Math.floor(row); // console.log(row); var boxHeiArr = []; for (var i = 0; i <row - 1; i++) { var boxHeight = boxs[i].offsetHeight; boxHeiArr.push(boxHeight); } for (var j =row; j <boxs.length; j++) { var min = Math.min.apply(null,boxHeiArr); var index = boxHeiArr.indexOf(min); boxs[j].style.position = "absolute"; boxs[j].style.top = boxHeiArr[index]+"px"; boxs[j].style.left = index * boxs[j].offsetWidth+"px"; boxHeiArr[index] += boxs[j].offsetHeight; } }查看全部
-
getClass(parent,className); function getClass(parent,clasName){ var boxArr = []; //用來存儲獲取到的所有class為box的元素 var oElements = parent.getElementsByTagName("*"); for(var i = 0;i<oElements.length; i++){ if(oElements[i].className == clasName){ boxArr.push(oElement[i]); } } return boxArr; }查看全部
-
function getByClass(clsName, parent){ //定義函數getByClass()實現獲取document或指定父元素下所有class為on的元素 var Oarr=[]; /* var Oparent=document.getElementById(parent)||document; var oElement=Oparent.getElementsByTagName("*");*/ if(parent){ var Oparent=document.getElementById(parent); var oElement=Oparent.getElementsByTagName("*"); }else{ var oElement=document.getElementsByTagName("*"); } for(var i=0; i<oElement.length; i++){ if(oElement[i].className==clsName){ Oarr.push(oElement[i]); } } return Oarr; }查看全部
-
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置查看全部
-
網頁可見區域寬：document.body.clientWidth查看全部
-
三種方法實現瀑布流布局查看全部
-
jquery添加圖片查看全部
-
jquery瀑布流查看全部
-
XXX.style.cssText以字符串的形式設置css樣式查看全部
舉報
0/150
提交
取消