一直顯示這個Cannot read property 'style' of null
window.onload?=?function(){
???? var?oP?=?document.getElementsByClassName('box');
???? var?Ma?=?document.getElementById('main');
???? var?oBoxW?=?oP[0].offsetWidth;
???? var?w?=?document.documentElement.clientWidth?||?document.body.clientWidth;?
???? var?cols?=?Math.floor(w/oBoxW);
???? Ma.style.cssText?=?'width:'+oBoxW*cols+'px;margin:0?auto';
}原本跟著老師一步一步寫下來，瀏覽器也是顯示這個?，F(xiàn)在在家直接用獲取class的方法，上面步驟都可以，測試過數(shù)字大小也對的，就是不能居中，cssText這個一直實現(xiàn)不了。瀏覽器顯示
Uncaught TypeError: Cannot read property 'style' of null
2017-04-11
視頻中
Ma.style.cssText?=?'width:'+oBoxW*cols+'px;margin:0?auto';
? 是在waterfall函數(shù)里的 ?我貼下我的整個代碼你參考下吧
window.onload = function() {
? ? waterfall('main', 'box');
? ? //模擬后臺過來的JSON數(shù)據(jù)
? ? var dataInt = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'}]}
? ? window.onscroll = function() {
? ? ? ? if (checkScrollSlide){
? ? ? ? var oParent = document.getElementById('main');
? ? ? ? //將數(shù)據(jù)塊渲染到當前頁面的尾部
? ? ? ? for (var i = 0; i < dataInt.data.length; i++) {
? ? ? ? var oBox = document.createElement('div');
? ? ? ? oBox.className = 'box';
? ? ? ? oParent.appendChild(oBox);
? ? ? ? var oPic = document.createElement('div');
? ? ? ? oPic.className = 'pic';
? ? ? ? oBox.appendChild(oPic);
? ? ? ? var oImg = document.createElement('img');
? ? ? ? oImg.src = "images/" + dataInt.data[i].src;
? ? ? ? oPic.appendChild(oImg);
? ? ? ? }
? ? ? ? //再將新數(shù)據(jù)排列
? ? ? ? waterfall('main', 'box');
? ? ? ? }
? ? }
}
function waterfall(parent, box) {
? ? //將main下的所有class為box的元素取出來
? ? var oParent = document.getElementById(parent);
? ? var oBoxs = getByClass(oParent, box);
? ? //計算頁面顯示的列數(shù)(頁面寬/box的寬)
? ? var oBoxW = oBoxs[0].offsetWidth;
? ? //document.documentElement.clientWidth獲取用戶頁面寬度
? ? var cols = Math.floor(document.documentElement.clientWidth / oBoxW); ? ?
? ? //動態(tài)設(shè)置main div的寬度和居中
? ? oParent.style.cssText = 'width:' + oBoxW * cols + 'px;margin:0 auto';
? ? var hArr = [];
? ? for (var i = 0; i < oBoxs.length; i++) {
? ? ? ? if (i < cols) {
? ? ? ? ? ? hArr.push(oBoxs[i].offsetHeight);
? ? ? ? } else {
? ? ? ? ? ? var minH = Math.min.apply(null, hArr);
? ? ? ? ? ? var index = getMinhIndex(hArr, minH);
? ? ? ? ? ? oBoxs[i].style.position = 'absolute';
? ? ? ? ? ? oBoxs[i].style.top = minH + 'px';
? ? ? ? ? ? //oBoxs[i].style.left = oBoxW*index + 'px';
? ? ? ? ? ? oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';
? ? ? ? ? ? //添加圖片后最小值加上他下面那張圖片的高度
? ? ? ? ? ? hArr[index] += oBoxs[i].offsetHeight;
? ? ? ? }
? ? } ? ?
}
//根據(jù)class獲取元素
function getByClass(parent, clsName) {
? ? var boxArr = new Array(), //用來存儲獲取到的所有class為box 的元素
? ? ? ? oElements = parent.getElementsByTagName('*');
? ? for (var i = 0; i < oElements.length; i++) {
? ? ? ? if (oElements[i].className == clsName) {
? ? ? ? ? ? boxArr.push(oElements[i]);
? ? ? ? }
? ? } ? ?
? ? return boxArr;
}
function getMinhIndex(arr, val) {
? ? for (var i in arr) {
? ? ? ? if (arr[i] == val) {
? ? ? ? ? ? return i;
? ? ? ? }
? ? }
}
//檢測是否具備加載數(shù)據(jù)塊的條件
function checkScrollSlide(argument) {
? ? var oParent = document.getElementById('main');
? ? var oBoxs = getByClass(oParent, 'box');
? ? //oBoxs[oBoxs.length-1].offsetTop最后一個盒子距離整個頁面頂部的距離
? ? // lastBoxH 最后一個盒子一半到整個頁面頂部的距離
? ? var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2);
? ? //混雜模式document.body.scrollTop 標準模式document.documentElement.scrollTo 獲取滾動的高度
? ? var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; ? ?
? ? var height = document.body.clientHeight || document.documentElement.clientHeight;
? ? return (lastBoxH<scrollTop+height)?true:false;
}