Question

我在javascript 类似中有一个单词列表：

var words = ["mine", "minute", "mist", "mixed", "money", "monkey", "month",
             "moon", "morning", "mother", "motion", "mountain", "mouth", "move",
             "much", "muscle", "music", "nail", "name", "narrow", "nation",
             "natural", "near", "necessary", "neck", "need", "needle", "nerve",
             "net", "new", "news", "night"];

这个词可以是1-25吗？信件很长。

我有div id="words"，设置宽度为700px（但我可能会改变它）。

使用css / javascript / jquery，我该怎么做：

按字母数字排序
将单词放在div标签内，从左到右，但是在单词div的右边缘没有间隙，并且一行上的单词之间有间距。
每个单词都应该有一个边框和一个背景。

像这样：

|reallylongwordssdf     shorterwordfdf     dfsdfsdfsdf     sdfsdfsdf|
|sdfsdfsdf   sdffsdop   sdfjpogs   sdfsds   dfsdsd   dfsdsd   dfsdsd|

我真的不知道从哪里开始。也许我可以设法编写代码来按字母数量排序，但在那之后，我会被卡住。

修改：我忘记添加，这些字词必须是链接。

Answer 1

以下是一个有效的例子：http://jsfiddle.net/6nLUU/4/

总结：

使用简单的JS排序对项目进行排序;我已经包含了一个我写的小库，可以更容易地按任意键排序。
使用text-align:justify容器使项目粘在右边缘。
在列表的末尾加入一个空的元素，以换行到下一行，这样就可以证明实际的最后一行是合理的。
使用CSS作为背景和边框。

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    .xstyle{display:block; float:left; padding-left:2px; padding-right:2px; border:1px solid black;}
    .spacer{display:block; float:left;}
    </style>
</head>
<body>
    <div id="words" style="width:700px;height:300px;border:1px solid red">

    </div>
    <script type="text/javascript">
        var words = ["mine", "minute", "mist", "mixed", "money", "monkey", "month",
                 "moon", "morning", "mother", "motion", "mountain", "mouth", "move",
                 "much", "muscle", "music", "nail", "name", "narrow", "nation",
                 "natural", "near", "necessary", "neck", "need", "needle", "nerve",
                 "net", "new", "news", "night", "big big big big big big big big big word"];

        (
            function fillWords() {
                words.sort
                (
                    function(a, b) {
                        return b.length - a.length;
                    }
                );

                if (!Array.prototype.forEach)
                    Array.prototype.forEach = function(callback, thisObj) {
                        if (typeof (callback) == 'function') {
                            for (var i = 0; i < this.length; i++)
                                callback.call(thisObj, this[i], i, this);
                        }
                    };

                if (!Array.prototype.some)
                    Array.prototype.some = function(callback, thisObj) {
                        if (typeof (callback) == 'function') {
                            for (var i = 0; i < this.length; i++)
                                if (callback.call(thisObj, this[i], i, this))
                                return this[i];
                        }
                    };


                var totalWidth = 0;
                var firstIndex = 0;
                var wBox = document.getElementById("words");
                var objList = [];

                function fillSpaces(count) {
                    var space = 700 - totalWidth;
                    var eachSpace = Math.ceil(space / count) + 1;

                    objList.some
                    (
                        function(sobj, i) {
                            if (i > 0) {
                                var spacer = document.createElement("div");
                                if (totalWidth + eachSpace > 700)
                                    eachSpace = 700 - totalWidth;
                                spacer.className = "spacer";
                                spacer.style.width = eachSpace + "px";
                                spacer.style.height = sobj.offsetHeight + "px";
                                wBox.insertBefore(spacer, sobj);
                                totalWidth += eachSpace;
                            }

                            return totalWidth >= 700;
                        }
                    );

                    if (totalWidth < 700) {
                        var spacer = document.createElement("span");
                        spacer.className = "spacer";
                        spacer.style.width = (700 - totalWidth) + "px";
                        wBox.insertBefore(spacer, objList[objList.length - 1]);
                    }
                }


                words.forEach
                (
                    function(item, index) {
                        var obj = document.createElement("a");
                        obj.href = "#";
                        obj.className = "xstyle";
                        obj.innerHTML = item;
                        wBox.appendChild(obj);
                        var ow = obj.offsetWidth;
                        totalWidth += ow;
                        if (totalWidth >= 700) {
                            totalWidth -= ow;

                            fillSpaces(index - firstIndex);

                            objList = [obj];
                            totalWidth = ow;
                            firstIndex = index;
                        } else {
                            objList.push(obj);
                        }
                    }
                );

                fillSpaces(words.length - firstIndex - 1);
            }
        )();
    </script>

</body>
</html>

Answer 3

这回答了部分问题。

将单词放在div标签内，从左到右，但是在单词div的右边缘没有间隙，并且一行上的单词之间有间隔。

每个单词都应该有一个边框和一个背景。

为了做到这一点，我会将每个单词包装在<span>中。然后我会设置类边距，以便每个跨度在它与下一个跨度之间具有相同的空间量。可以使用轻微的左右填充，边框和背景颜色设置跨度。

修改如果您希望将字词作为链接，请使用<a>标记，方法与上面的span标记相同

按字母顺序排序单词，然后整齐地放置单词

3 个答案: