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

http://quirksmode.org/css/columns/が探しているものだと思います。

例を参照してください: http://www.w3.org/TR/css3-multicol/#the-multi-column-model

于 2013-07-21T00:51:17.463 に答える
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 に答える
-1

正直なところ、これに対する最善の答えは、ページネーションを完全に避けることだと思います。人々は、1 つのコラムのブログ、ニュース記事、記事などを読むことにかなり慣れてmax-width:800px; width:95%; margin:0 auto;います。

これは、画像が大量にある場合に問題を引き起こす可能性がありますが、必要なものだけを読み込むことで解決できます。遅延読み込みを参照してください。

それは個人的な意見です。ページは好きなだけ長くできることを覚えておいてください。ページネーションは本用です ;)

幸運を。

于 2013-07-21T08:06:58.867 に答える