Re: 能否给display加一个选项：display:waterfall

waterfall的行为确实很麻烦。

第一，display:top-inline-block 这个肯定不行。因为inline-block仍然是line
box里的，而waterfall布局根本就没有line box的事。
第二，display: waterfall 或类似的特别属性，如果仅仅为waterfall这一个特殊需求，看来是很不划算。毕竟 waterfall
布局即使在网站里也只有少量应用。use cases实在太少。
第三，waterfall从布局效果上说和grid或multi
column有一定的共通处，但是从flow上来说又完全不同，反而类似exclusions和regions。如果抛弃这些草案中的模型另起炉灶不太现实，但是要怎样从现有草案中扩展出这样的功能，我想了半天也没想出来……囧。

2012/3/11 程劭非 <csf178@gmail.com>

> 我也觉得需要仔细描述一下这个waterfall的行为，我想我可以提供一些问题让JK完善思路：
> 1.容器和子元素出现在floats，absolute elements还是normal flow里面？
> 2.容器和子元素，各自需要怎样的display和float属性？如果不符合该怎么办？
> 3.子元素的位置到底如何计算？
> 4.实现这个waterfall，是否需要新的format context?
> 5.从woxihuan的例子看，子元素似乎是定宽的，这个宽度应该如何指定？用容器上的属性还是子元素上的属性？
> 6.waterfall的子元素，对它的内容有什么要求和影响？它的高度如何决定？
>
> 我觉得邮件里至少应该包含足够回答这些问题的信息吧。JK可以参考一下css这块的标准
> http://www.w3.org/TR/css3-box/#types
>
>
>
> 在 2012年3月11日 上午1:17，Kang-Hao (Kenny) Lu <kennyluck@w3.org>写道：
>
> (12/03/09 17:28), John Hax wrote:
>> > 能更精确的描述这个waterfall模型的行为吗？
>> > 现在是通常用什么方式实现的？float？现有的方式存在什么缺点呢？引入新的display模型如何解决这些缺点？
>>
>> 同意 Hax 所說的，特別是「现有的方式存在什么缺点呢」最好講明白，在之前
>> lazyload 的提案[1]裡就有「問題敘述 & 使用情節」、「當前作法」（包含當前
>> 解法的問題）、「提案」�@幾個段落。我覺得�@個功能的使用情節已經算是夠清楚
>> 了，我想主要要說明的就是現有作法的缺點。
>>
>> CSS 一般會弄一些根本沒有當前作法的技術，像是全銀幕之類的事情，所以證明目
>> 前的作法具有重大缺陷是很重要的環節。不然的話一般 JS+HTML+CSS 能達到的東
>> 西就儘管弄，不能達到的東西用瀏覽器實作�@樣分工合作不是更好？
>>
>> �@個提案最好描述跟 CSS Regions[2] 的關係，CSS Regions 我沒有詳細看過，但
>> 是似乎很多浮動的東西，我覺得你�@個提案作為那個草案的一部分的機會應該比突
>> 然說要加一個額外的值（要加在哪裡？）要大一點。
>>
>> [1] http://www.w3.org/html/ig/zh/wiki/Proposals/img_lazyload
>> [2] http://dev.w3.org/csswg/css3-regions/
>>
>> (12/03/08 17:43), 应加宽 wrote:
>> > 能否给display加一个选项：display:waterfall
>>
>> (12/03/09 18:07), 应加宽 wrote:
>> > 有同学反馈说叫waterfall有歧义。叫display:top-inline-block更语义化一
>> > 些。
>>
>> (12/03/09 19:25), 应加宽 wrote:
>> > 用float选项更好。以下的需求是：float: top-left (优先上浮，其次左浮)
>>
>> 我覺得在�@個時候討論語法太早了，�@個問題應該相對較小，慢慢討論就好了。雖
>> 然�@樣說，我個人覺得 'display' 不是很合理，'diplay: flexbox、grid' �@類
>> 東西都是元素內部的排版模式整個跟原來的 CSS 不一樣吧？�@個提案看起來好像
>> 比較像是是外部定位的東西。
>>
>> 另一種問法，'display: table' 的元素可不可以參與瀑布流？如果可以的話
>> 'display: table' 的元素設成 'display: waterfall' 要怎麼跟原本不是
>> 'display: table' 的東西區隔（也就是，<table> 設成 'display: waterfall'
>> 之後裡面的東西要怎麼渲染？）。
>>
>> 我覺得 'float: top-left' 聽起來蠻好的，�@個功能如果成為標準的話的確是應
>> 該以 'float' 或是 'position' 的新值呈現。
>>
>>
>>
>> 此致
>>
>> Kenny
>>
>>
>