बहु-स्तंभ पृष्ठ संरचना

बहुत बार ऐसी परिस्थितियां होती हैं जब साइट में कई कॉलम होते हैं, और कार्य यह है कि वे एक के बाद एक "खिंचाव" करते हैं, अर्थात। एक ही ऊंचाई है। सरल सीएसएस टूल द्वारा इस समस्या को हल करना हमेशा संभव नहीं होता है, इसलिए, मैं एक स्क्रिप्ट का प्रस्ताव करता हूं जो इस समस्या को हल करती है।

सबसे पहले, मैं समझाऊंगा कि यह कैसे काम करता है:

स्थापना बहुत सरल है (हम स्क्रिप्ट को कनेक्ट करते हैं और बॉडी को पंजीकृत करते हैं। ऑनलोड इवेंट हैंडलर):



class="maxheight" , , .. , :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet



2 , , .

: Sokol

(maxheight.js):
var ElementMaxHeight = function() {
this.initialize.apply(this, arguments);
}

ElementMaxHeight.prototype = {
initialize: function(className) {
this.elements = document.getElementsByClassName(className || 'maxheight');

this.textElement = document.createElement('span');
this.textElement.appendChild(document.createTextNode('A'));
this.textElement.style.display = 'none';
this.textElement.style.position = 'absolute';
this.textElement.style.fontSize = '1em';
document.body.appendChild(this.textElement);
this.textElementHeight = document.getDimensions(this.textElement).height;
var __object = this;
var __method = this.checkFontSize;
this.checkFontSizeInterval = window.setInterval(function() {return __method.apply(__object)}, 500);

this.expand();
// Refresh elements height onResize event
var __method = this.expand;
if (window.addEventListener) {
window.addEventListener('resize', function(event) {return __method.apply(__object, [( event || window.event)])}, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', function(event) {return __method.apply(__object, [( event || window.event)])});
}
},

expand: function() {
this.reset();
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.height = document.getDimensions(this.elements[i].parentNode).height + 'px';
}
},

reset: function() {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.height = 'auto';
}
},

checkFontSize: function() {
var height = document.getDimensions(this.textElement);
if(this.textElementHeight != height) {
this.textElementHeight = height;
this.expand();
}
}
}

if (!!document.evaluate) {
document._getElementsByXPath = function(expression, parentElement) {
var results = [];
var query = document.evaluate(expression, parentElement || document,
null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0, length = query.snapshotLength; i < length; i++)
results.push(query.snapshotItem(i));
return results;
}
}

document.getElementsByClassName = function(className, parentElement) {
if (!!document.evaluate) {
var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
return document._getElementsByXPath(q, parentElement);
} else {
var children = (parentElement || document.body).getElementsByTagName('*');
var elements = [], child;
for (var i = 0, length = children.length; i < length; i++) {
child = children[i];
if (child.className.length != 0 &&
(child.className == className ||
child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))) {
elements.push(child);
}
}
return elements;
}
}

document.getDimensions = function (element) {
var display = element.style.display;
if (display != 'none' && display != null) { // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
} else {
return {width: element.clientWidth, height: element.clientHeight};
}
}