Question

我需要为我网站的内容构建动态多列视图（我使用drupal作为CMS，如果可以是有用的信息），具有以下功能

1）列宽是固定的（OK）

2）列数取决于窗口宽度（OK）

3）元素没有固定高度（重要，尚未固定）

4）内容应该可能是垂直分布的（不知道怎么做，因为我使用css属性float：left）

请参阅此屏幕截图以更好地了解：http://dl.dropbox.com/u/72686/grid.png

感谢

Answer 1

看看jQuery Masonry，一个很棒的插件。

Answer 2

好吧，我会试着加入一些以下网站：http://www.quirksmode.org/dom/w3c_cssom.html用于托管以下代码[虽然他们已经把它记下来但我觉得= /但它运行良好，我几乎在所有项目中都使用它]

function getClientWidth()
{ 
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerWidth;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientWidth;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return myWidth = document.body.clientWidth;
    }
}
function getClientHeight()
{  
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return document.body.clientHeight;
    }
}

请注意，获取浏览器的内部宽度[窗口大小不包括chrome]对于许多浏览器来说是不同的，正如您在代码中看到的那样。

你必须按照这个来执行if / switch来格式化页面，具体取决于你想要做什么[css样式的positoin =绝对，左，顶部]夹住宽度/高度，否则你将获得acid3的结果当它在IE上运行=）[任何人得到那个笑话？ HEH？]

请注意，如果你使用我的方法，IE不喜欢你，而且... divs [你的列]往往会重叠。可悲的是，在你的情况下做任何事情的最安全的方法是使用一张桌子。但是，大多数“现代”Web开发人员倾向于不喜欢表格来布置您的网站[事实上，有些人认为它被弃用]

Answer 3

我用这个精彩的jquery插件解决了：http://welcome.totheinter.net/columnizer-jquery-plugin/

CSS / Javascript：动态多列

3 个答案: