Ниже я создал как статический, так и динамический подход к колонизации абзацев.Код в значительной степени самодокументирован.
Foreward
Ниже вы найдете следующие методы создания столбцов:
- Статический (2 столбца)
- Динамический с JavaScript+ CSS (n-столбцы)
- Динамический с JavaScript + CSS3 (n-столбцы)
Статический (2 столбца)
Это просто 2макет столбца.Основано на Гленнале 1-м ответе .
$(document).ready(function () {
var columns = 2;
var size = $("#data > p").size();
var half = size / columns;
$(".col50 > p").each(function (index) {
if (index >= half) {
$(this).appendTo(".col50:eq(1)");
}
});
});
.col50 {
display: inline-block;
vertical-align: top;
width: 48.2%;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col50">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>
<div class="col50"></div>
Динамический w / JavaScript + CSS (n-столбцы)
При таком подходе я по существу определяю, нужен ли блокбыть преобразованы в столбцы.Формат col-{n}.n - это количество столбцов, которые вы хотите создать.
$(document).ready(function () {
splitByColumns('col-', 4);
});
function splitByColumns(prefix, gap) {
$('[class^="' + prefix + '"]').each(function(index, el) {
var me = $(this);
var count = me.attr("class").split(' ').filter(function(className) {
return className.indexOf(prefix) === 0;
}).reduce(function(result, value) {
return Math.max(parseInt(value.replace(prefix, '')), result);
}, 0);
var paragraphs = me.find('p').get();
me.empty(); // We now have a copy of the children, we can clear the element.
var size = paragraphs.length;
var percent = 1 / count;
var width = (percent * 100 - (gap / count || percent)).toFixed(2) + '%';
var limit = Math.round(size / count);
var incr = 0;
var gutter = gap / 2 + 'px';
for (var col = 0; col < count; col++) {
var colDiv = $('<div>').addClass('col').css({ width: width });
var css = {};
if (col > -1 && col < count -1) css['margin-right'] = gutter;
if (col > 0 && col < count) css['margin-left'] = gutter;
colDiv.css(css);
for (var line = 0; line < limit && incr < size; line++) {
colDiv.append(paragraphs[incr++]);
}
me.append(colDiv);
}
});
}
.col {
display: inline-block;
vertical-align: top;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-6">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>
Динамический с JavaScript + CSS3 (n-столбцы)
Этот код получен из Glennular s 2й ответ .Используются правила column-count и column-gap CSS3.
$(document).ready(function () {
splitByColumns('col-', '4px');
});
function splitByColumns(prefix, gap) {
var vendors = [ '', '-moz', '-webkit-' ];
var getColumnCount = function(el) {
return el.attr("class").split(' ').filter(function(className) {
return className.indexOf(prefix) === 0;
}).reduce(function(result, value) {
return Math.max(parseInt(value.replace(prefix, '')), result);
}, 0);
}
$('[class^="' + prefix + '"]').each(function(index, el) {
var me = $(this);
var count = getColumnCount(me);
var css = {};
$.each(vendors, function(idx, vendor) {
css[vendor + 'column-count'] = count;
css[vendor + 'column-gap'] = gap;
});
me.css(css);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-3">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>