var html = $.ajax({
url: "some.php",
async: false
}).responseText;
<div class="black-square">Текст в черном квадрате</div>
.black-square
{
width: 100px;
height: 100 px;
background-color: white;
border: 1px solid black;
}
(function($) {
var defaults = {
columns: 3,
classname: 'column',
min: 1,
colsize: 16
};
$.fn.autocolumnlist = function(params) {
return this.each(function() {
var options = $.extend({}, defaults, params);
var els = $(this).children('li');
var dimension = els.size();
if (options.columns == 'auto') {
options.columns = Math.ceil(dimension / options.colsize);
}
if (dimension > 0 && options.columns > 1) {
var elCol = Math.ceil(dimension / options.columns);
if (elCol < options.min) {
elCol = options.min;
}
var start = 0;
var end = elCol;
for (i = 0; i < options.columns; i++) {
// Add "last" class for last column
if ((i + 1) == options.columns) {
els.slice(start, end).wrapAll('<div class="' + options.classname + ' сlast" />');
} else {
els.slice(start, end).wrapAll('<div class="' + options.classname + '" />');
}
start = start + elCol;
end = end + elCol;
}
}
});
};
})(jQuery);
<ul class="need_to_columns">
<li></li>
...
</ul>
$('.need_to_columns').autocolumnlist({
columns: 3,
classname: 'column'
});