0

我有一个页面，其中提供了一篇长篇文章，以便于阅读。我想在宽屏上将文本分成几列，但我不想让用户一直滚动到页面底部，然后在完成每一列后再次回到顶部。

有没有办法在不使用 JavaScript 的情况下自动将文章分成垂直部分（“页面”），这些部分足够短以完全适合视口？这里有一些 ASCII 艺术来说明：

+-------------------------------------------------------------+
|                       === Some Title ===                    |
|                                                             |
| You think water moves fast?    it out. Now we took an oath, |
| You should see ice. It moves   that I'm breaking now. We    |
| like it has a mind. Like it    said we'd say it was the     |
| knows it killed the world      snow that killed the other   |
| once and got a taste for       two, but it wasn't. Nature   |
| murder. After the avalanche,   is lethal but it doesn't     |
| it took us a week to climb     hold a candle to man.        |
| out. Now, I don't know                                      |
| exactly when we turned on      Like you, I used to think    |
| each other, but I know that    the world was this great     |
| seven of us survived the       place where everybody lived  |
| slide... and only five made    by the same standards I did, |
+-------------------------------------------------------------+
| then some kid with a nail     Dr. Wu inserted a gene that   |
| showed me I was living in     makes a single faulty enzyme  |
| his world, a world where      in protein metabolism. The    |
| chaos rules not order, a      animals can't manufacture the |
| world where righteousness is  amino acid lysine. Unless     |
| not rewarded. That's Cesar's  they're continually supplied  |
| world, and if you're not      with lysine by us, they'll    |
| willing to play by his rules, slip into a coma and die.     |
| then you're gonna have to pay                               |
| the price.                    Do you see any Teletubbies in |
| The lysine contingency -      here? Do you see a slender    |
| it's intended to prevent the  plastic tag clipped to my     |
| spread of the animals is case shirt with my name printed on |
| they ever got off the island. it?                           |
+-------------------------------------------------------------+

线条代表视口的高度。列在视口的底部结束，文本流到下一列的顶部，从视口的顶部开始。一旦阅读了文本的“页面”，用户就会向下滚动到下一个并重新开始。这允许将文本拆分为列，而无需大量额外的滚动。在大屏幕上，“页面”会很高，但在小屏幕上，它们会足够短以适合视口。

一个好的解决方案不必是完美的语义，但不应该需要任何 JavaScript。

4

4 回答 4

2

我玩了一下。它仅适用于纯文本，但具有响应性。

(function($) {
    $.fn.fitcol = function(options) {

            changes = function(el) {
                    var $el = $(el),
                            settings = $.extend({
                            intendedheight: $(window).height() - ($el.outerHeight()-$el.height()), // set default intended height (rough estimation: height of window - padding and border)
                    }, options),
                            height = $el.height(),
                            ratio = height / settings.intendedheight,
                            text = $el.text(), //clear all inner html (should be fixed) currently needed in case of window resize
                            length = text.length,
                            intendedlength = Math.floor(length / ratio),
                            i = 1,
                            html = '</div><div class="column">'; //code for a breakpoint
                            text = '<div class="column">' + text;
                var correction = 20; 
                while((intendedlength * i) + correction < text.length) { // loop to put breakpoints into the text
                    var j = 0
                    while(text.charAt((intendedlength * i) + correction) !== ' ' &&  j<= 20) { //loop so we don't break words
                                correction--;
                                j++;
                                }
                    text = text.substr(0, (intendedlength * i) + correction ) + html + text.substr((intendedlength * i) + correction);
                    correction += html.length; // we are changing the length of text when we add html
                    i++;
                }
                text = text + '</div>';

                $el.removeClass('column');
                $el.html(text);

            };
            //make it responsive
            return this.each(function() {
                    var that = this;
                    $(window).resize(function() {
                            changes(that);
                    });
                    changes(this);
            });
    };
}(jQuery));

$('.container').fitcol();

请参阅http://codepen.io/wudi96/pen/doXYrv

这是非常实验性的，远未优化。

与 panelSnap http://guidobouman.github.io/jquery-panelsnap/一起使用会很好。

于 2015-05-16T12:18:10.373 回答
0

您需要 css 列，只需将文本分组放入不同的 div 中。这是一个显示它的jsfiddle。这是我的CSS：

.mydiv
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
于 2013-07-21T00:52:33.617 回答
0

我认为http://quirksmode.org/css/columns/是您正在寻找的。

请参阅示例：http ://www.w3.org/TR/css3-multicol/#the-multi-column-model

于 2013-07-21T00:51:17.463 回答
-1

老实说，我认为最好的答案是完全避免分页。人们非常习惯于阅读单栏博客、新闻故事、文章等。我只是将max-width:800px; width:95%; margin:0 auto;其设置为一个长流。

如果您有大量图像，这可能会导致问题，但可以通过仅加载需要的图像来解决，请参阅延迟加载。

这是个人意见。请记住，页面可以随心所欲，分页适用于书籍；）

祝你好运。

于 2013-07-21T08:06:58.867 回答