[英]Cloud tags sorting and positioning in a fixed-width div
我有一个固定宽度的div ,它包含像stackoverflow-tags这样的'tags'。
现在,令我不安的是, Hallo
标签位于最后一行,但它适合第一行。 像这样:
元素的顺序无关紧要。 因此,重新排序将是一种选择。
问题:我怎样才能做到这一点? 我目前正在使用<ul><li></li></ul>
构造。
最好的方式是CSS-Way,但我想由JS来解决这个问题。 任何想法,将不胜感激 :)
更新 JSFiddle: http : //jsfiddle.net/CLj2q/
知道了:jsFiddle就在这里
$(function() {
$('.as-close').click(function(e) { $(this).parent().remove(); });
DoTagSort();
});
function DoTagSort() {
var TheItems = [], TheHTML = '';
var TheLinks = $('.as-selections').find('li').each(function () {
TheItems.push($(this).text().slice(1));
});
TheItems.sort(function(a, b) { return b.length - a.length; });
var TheTag = '<li class="as-selection-item"><a class="as-close">×</a>';
while(TheItems.length > 1) {
TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
TheHTML = TheHTML + TheTag + TheItems[TheItems.length - 1] + '</li>';
TheItems.splice(0, 1);
TheItems.splice(TheItems.length - 1, 1);
}
if (TheItems.length) {
TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
}
$('.as-selections').html(TheHTML);
}
假设标签的容器是一个设置宽度,而标签本身不是(即:它们从它们的内容继承它们的宽度,而不是我们能够给它们设置一个宽度),那么它的数量不是很大你可以从CSS的角度做,而不会破坏和重新排序标记的流程。
如果标记是在服务器端生成的,我确定你可以在将标记推入视图之前计算宽度并重新排序。 如果没有,你就会因为没有使用JavaScript而陷入困境。
鉴于订单要求似乎纯粹基于外观(即:不起作用),增强使用JavaScript在屏幕截图中显示的标准浮点视图没有任何害处。 这意味着启用JS的访问者将获得“增强”视图(其中元素排序很好),而非JS用户仍然会拥有功能完备的标签云,尽管这种方式稍微有些不太有条理。
jQuery Masonry或Isotope可能会做你所需要的。
这是搁置的解决方案。 和砌体有点作弊(请注意columnWidth:1)。
$('.as-selections').masonry({
itemSelector: '.as-selection-item'
, columnWidth: 1 });
我想你可以为这个或更好的html表单找到更合适的库,以便砌筑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.