识别 css 创建的列并使用 javascript 添加一个额外的列

Question

我一直在寻找类似报纸的专栏布局，我想知道是否有一种方法可以通过 css 或 javascript 识别列（或分栏符），并实用地使用 javascript 在列之间添加内容。

基本想法是我有一个 100% 高度的布局，并且创建的列延伸到屏幕右侧，如下所示：http://www.kaikkonendesign.fi/columns/ 我想要的是，例如在第一列之后，我添加了一个额外的列在第 1 列和第 2 列之间，在该列中我会添加内容（图片、额外链接...）

我知道如何使用带有 innerHtml 的 javascript 添加内容，并且我找到了一种计算列数的方法（Get number of columns created by css column-width 或 How to get css3 multi-column count in Javascript），但我不知道如何获取列的类或 ID 或column-break 以查看将我的 html 附加到何处。

是否可以通过一些代码对浏览器说“在第 1 列之后添加另一列”或“在第 1 列之后添加 100% 高度的内容”或“在第 1 列之后添加 XXpx 的空白空间（并显示一个绝对定位的 div)" 例如？

这里有一个例子来说明：http://hpics.li/a99853b

编辑：这里问的是基本 html/css 列的快速小提琴：https://jsfiddle.net/p8ar0zpr/1/

<div class="example">
  <h1>Sed dignissim lacinia nunc</h1>
  <p class="lead">Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>
</div>



 .example {
  -webkit-columns: 320px;
  -moz-columns: 320px;
  columns: 320px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  height:95%;
  padding:1em;
}
html{height:100%;}
body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 0;
  margin:0;
  height:100%;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

.lead {
  font-variant: small-caps;
  font-size: 1.3em;
  text-align: left;
  font-style: italic;
}

谢谢，

Answer 1

您可以使用的一种方法是检查每个p 元素左上角的位置。每列顶部的 p 元素在页面上将高于前一个元素。 （或者前面没有）。

这里有一些东西可以玩。它只是突出显示每列顶部的 p。

window.addEventListener('load', onDocLoaded, false);
HTMLCollection.prototype.forEach = Array.prototype.forEach;

function onDocLoaded(evt)
{
	getColumnTops();
}


function getColumnTops()
{
	// 1. get an HTMLCollection of all p elements in the page
	var paras = document.getElementsByTagName('p');

    // 2. step through the collection, checking items' Y pos on the page
	paras.forEach(checkPosition);
}

var lastValue = 1000000;  // dummy value to ensure first one is detected.
function checkPosition(elem, index, array)
{
	if (elem.offsetTop < lastValue)
	{
		// console.log(elem.offsetTop);
		elem.classList.add('colTop');
	}
	lastValue = elem.offsetTop;
}

.example {
  -webkit-columns: 320px;
  -moz-columns: 320px;
  columns: 320px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  height:95%;
  padding:1em;
}
html{height:100%;}
body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 0;
  margin:0;
  height:100%;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

.lead {
  font-variant: small-caps;
  font-size: 1.3em;
  text-align: left;
  font-style: italic;
}

.colTop
{
	background: rgba(200,0,0,0.25);
}

<div class="example">
  <h1>Sed dignissim lacinia nunc</h1>
  <p class="lead">1 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>2 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>3 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>4 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>5 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">6 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>7 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>8 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>9 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>10 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">11 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>12 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>13 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>14 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>15 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">16 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>17 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>18 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>19 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>20 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">21 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>22 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>23 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>24 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>25 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">26 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>27 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>28 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>29 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>30 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">31 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>32 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>33 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>34 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>35 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">36 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>37 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>38 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>39 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>40 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
</div>