Warning:
This wiki has been archived and is now read-only.
Water-fall proposal draft
From HTML5 Chinese Interest Group Wiki
Hi, Sometimes float elements can be arranged more orderly and compactly. Therefore, I think 'float' should include a new value, namely 'float:top-left'. The top-left floated elements should be put as “top-left” as far as possible. Sample 1: The following 6 boxes are laid out as follows when the page only has two columns width, three columns width, four columns width. The picture URL: http://hi.baidu.com/jkisjk/album/item/88ec170f4bfbfbed4e3c89c678f0f736aec31fe2.html?isnew=1# Sample 2: The following 9 boxes are laid out as follows when the page only has one column width, two columns width, three columns width. The picture URL: http://hi.baidu.com/jkisjk/album/item/7927b04f78f0f736469bf3b80a55b319eac413e2.html# JK Ying 2012-03-14
============================================================= Hi, everyone This is a proposal for a new css layout. We have a few discussions in HTML Chinese interest group. This layout was first used by http://pinterest.com/ and begin to be used by many other website recently. Here is several other samples: http://faxianla.com/ http://www.mogujie.com/book/clothing/ http://www.diandian.com/ http://www.woxihuan.com/ http://search.naver.jp/image?q=%E5%89%8D%E7%94%B0%E6%95%A6%E5%AD%90 As you can see all above websites use JavaScript to implement this layout. There is no way to do this in CSS. (We tried flex-box, grid and exclusions, but none of them could support this well.) Considering it is so widely used, I think supporting this in CSS might be a good choice. To support this, we need a new kind of box. It creates anonymous block boxes like a block container for its inline-level child boxes, even if there is no block level box inside it. The box then generates column boxes like a multi-column element. It then decides which column box child boxes flow into in the way described below: Overall the rule is "next box should be placed into the shortest column." Consider a sample container and several child boxes, produced by the following HTML: <div id="container"> <div id="a" > </div> <div id="b" > </div> <div id="c" > </div> <div id="d" > </div> <div id="e" > </div> </div> The positions of child boxes are determined as following: ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ａ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃ ┃ ┃┃ ┃┃┃ ┃┃ ┃ ┃┃ ┃┃┃ ｂ ┃┃ ┃ ┃┃ ┃┃┃ ┃┃ ┃ ┃┃ ┃┃┗━━━┛┃ ┃ ┃┃ ａ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┃ ｂ ┃┃┃ ｃ ┃┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┗━━━┛┃┃ ┃┃ ┃┃ ａ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃ ┃┗━━━┛┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┃ ｂ ┃┃┃ ｃ ┃┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┗━━━┛┃┃ ┃┃ ┃┃ ａ ┃┃┏━━━┓┃┃ ┃┃ ┃┃ ┃┃┃ ┃┃┗━━━┛┃ ┃┃ ┃┃┃ ｄ ┃┃ ┃ ┃┃ ┃┃┃ ┃┃ ┃ ┃┗━━━┛┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┃ ｂ ┃┃┃ ｃ ┃┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┗━━━┛┃┃ ┃┃ ┃┃ ａ ┃┃┏━━━┓┃┃ ┃┃ ┃┃ ┃┃┃ ┃┃┗━━━┛┃ ┃┃ ┃┃┃ ｄ ┃┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┗━━━┛┃┗━━━┛┃┃ ｅ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ Thanks, Shaofei Cheng =============================================================